easyui的validatebox重写自定义验证规则的几个实例

validatebox已经实现的几个规则:

验证规则是根据使用需求和验证类型属性来定义的，这些规则已经实现(easyui API)：

• email：匹配E-Mail的正则表达式规则。
• url：匹配URL的正则表达式规则。
• length[0,100]：允许在x到x之间个字符。
• remote['http://.../action.do','paramName']：发送ajax请求需要验证的值，当成功时返回true。

拓展：自定义验证规则

自定义验证规则，需要重写$.fn.validatebox.defaults.rules中定义的验证器函数和无效消息。

1. 限制输入框中字符最小长度为5:

html代码 :

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

js验证代码:

$.extend($.fn.validatebox.defaults.rules, {    

    minLength: {    

        validator: function(value, param){    

            return value.length >= param[0];    

        },    

        message: 'Please enter at least {0} characters.'   

    }    

}); 

2. 验证输入密码和确认密码是否一致:

html代码:

　　　　　　　　　<tr>

                <td width="100px" align="right" ><nobr>DRDS链接密码:</nobr></td>

                <td ><input type="password" class="easyui-validatebox" id="password" name="password" 

               　　 style="width: 200px" required="required" validType="checkpassword"/>

                <span></span>     

                 </td>

                </tr>

                <tr id="wltr">

                <td width="100px" align="right" ><nobr>确认密码:</nobr></td>  

                    <td width="300px">

                        <input type="password" class="easyui-validatebox" id="repassword" name="repassword" required="required"

                         style="width: 200px" validType="equalTo['#password']"/>                    

                    </td>

                    </tr>

js验证代码:

$.extend($.fn.validatebox.defaults.rules, {    

    equalTo: {
　　　　validator: function (value, param) {
　　　　　　return $(param[0]).val() == value;
　　　　　　 },
　　　　 message: '两次输入密码不匹配' }  

});

多个验证规则可以并列在一个验证规则里面使用,例如上面两个并列在一起使用的方式如下：

$.extend($.fn.validatebox.defaults.rules, {    

    minLength: {    

        validator: function(value, param){    

            return value.length >= param[0];    

        },    

        message: 'Please enter at least {0} characters.'   

    }    

},
equalTo: {　　　　validator: function (value, param) {

　　　　　　return $(param[0]).val() == value;

　　　　　　 },

　　　　 message: '两次输入密码不匹配' }  

});