jQuery EasyUI API 中文文档 – ValidateBox验证框

关于“jQuery EasyUI API 中文文档 - ValidateBox验证框”的完整攻略，我会给您进行详细介绍。

简介

ValidateBox是jQuery EasyUI库中的一种输入验证框。通过ValidateBox，我们可以轻松地验证用户输入的内容是否合规。同时，ValidateBox也支持自定义验证规则。

基本用法

首先，我们需要引入jQuery EasyUI库及其依赖。在HTML文件中加入以下代码：

<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

接下来，在HTML中加入以下代码，创建一个ValidateBox：

<input class="easyui-validatebox" type="text" name="userName" required="true" />

其中，.easyui-validatebox是ValidateBox的样式名，type="text"指定输入框类型为文本输入框，name="userName"指定输入框的名称，required="true"指定输入框为必填项。

现在，当我们输入框中没有输入内容并且失去焦点时，输入框下方就会出现红色的提示信息“该输入项为必输项”。

自定义验证规则

ValidateBox支持我们自定义验证规则。在这里，我来举两个例子。

验证密码格式是否正确

假如我们需要验证密码的格式必须为6-20位的字母、数字或下划线，我们可以使用以下代码：

<input class="easyui-validatebox" type="text" name="password" validType="customPassword" />

这里，我们指定了validType="customPassword"，并且在JavaScript中定义该验证规则：

$.extend($.fn.validatebox.defaults.rules, {
    customPassword: {
        validator: function(value) {
            return /^[A-Za-z0-9_-]{6,20}$/.test(value);
        },
        message: '密码必须为6-20位且只包含字母、数字或下划线!'
    }
});

当输入内容不符合自定义规则时，输入框下方就会出现红色的提示信息。

验证输入的两个数值的大小

假如我们需要验证两个输入框中的数值大小关系必须满足一个条件，可以使用以下代码：

<input class="easyui-validatebox" type="text" name="value1" validType="customValue" />
<input class="easyui-validatebox" type="text" name="value2" validType="customValue" />

这里，我们指定了validType="customValue"，并且在JavaScript中定义该验证规则：

$.extend($.fn.validatebox.defaults.rules, {
    customValue: {
        validator: function(value, param) {
            var targetValue = $(param[0]).val();
            if (targetValue == '') {
                return true;
            }
            if (parseFloat(value) > parseFloat(targetValue)) {
                return false;
            }
            return true;
        },
        message: '第一个数值必须小于或等于第二个数值!'
    }
});

以上就是ValidateBox验证框的基本用法和自定义验证规则的示例，希望能对您有所帮助。