jQuery EasyUI 表单插件 – Validatebox 验证框

通过 $.fn.validatebox.defaults 重写默认的 defaults。

验证框（validatebox）是为了验证表单输入字段而设计的。如果用户输入无效的值，它将改变背景颜色，显示警告图标和提示消息。验证框（validatebox）可与表单（form）插件集成，防止提交无效的字段。

依赖

• tooltip

用法

从标记创建验证框（validatebox）。

<input id="vv" data-options="required:true,validType:'email'">

使用 javascript 创建验证框（validatebox）。

<input id="vv">

$('#vv').validatebox({
    required: true,
    validType: 'email'
});

检查密码和重新输入密码是相同的。

// extend the 'equals' rule
$.extend($.fn.validatebox.defaults.rules, {
    equals: {
        validator: function(value,param){
            return value == $(param[0]).val();
        },
        message: 'Field do not match.'
    }
});

<input id="pwd" name="pwd" type="password" data-options="required:true">
<input id="rpwd" name="rpwd" type="password"
    required="required" validType="equals['#pwd']">

验证规则

验证规则是通过使用 required 和 validType 属性来定义的，这里是已经实施的规则：

• email：匹配 email 正则表达式规则。
• url：匹配 URL 正则表达式规则。
• length[0,100]：允许从 x 到 y 个字符。
• remote['http://.../action.do','paramName']：发送 ajax 请求来验证值，成功时返回 'true' 。

要自定义验证规则，重写 $.fn.validatebox.defaults.rules，来定义一个验证函数和无效的信息。例如，定义一个 minLength 验证类型：

$.extend($.fn.validatebox.defaults.rules, {
    minLength: {
        validator: function(value, param){
            return value.length >= param[0];
        },
        message: 'Please enter at least {0} characters.'
    }
});

现在您可以使用这个 minLength 验证类型来定义一个至少输入5个字符的输入框：

<input data-options="validType:'minLength[5]'">

属性

<input data-options="required:true,validType:'url'">
<input data-options="
    required:true,
    validType:['email','length[0,20]']
">

方法