jQuery EasyUI-validatebox验证框、实现自定义验证

效果图：

• 首先我们要先重写$.fn.validatebox.defaults.rules定义的验证器和错误信息

$.extend($.fn.validatebox.defaults.rules, {
    //在这里写重写的验证其及方法和错误信息
});

• 验证长度示例

• 验证比较俩个值是否相等,如二次输入密码验证

• 表单相关 代码

        <form id="ff" class="easyui-form" method="post" data-options="novalidate:true" action="/login">
            <table cellpadding="5">
                <tr>
                    <td id="name">用户名:</td>
                    <td><input class="easyui-textbox" id="userName" type="text" name="userName" data-options="iconCls:'icon-man',required:true,validType:'length[4,10]',missingMessage:'请输入用户名'"/></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input class="easyui-textbox" id="passWord" type="password" name="passWord" data-options="iconCls:'icon-lock',required:true,validType:'length[6,12]',missingMessage:'请输入密码'"/></td>
                </tr>
                <tr>
                    <td>重复密码:</td>
                    <td><input class="easyui-textbox" id="rePassWord" type="password" name="rePassWord" data-options="iconCls:'icon-lock',required:true,validType:'equalTo[\'#passWord\']', invalidMessage:'再次输入的密码不一致', missingMessage:'请再输入一次密码'"/></td>
                </tr>
            </table>
        </form>

missingMessage 表示验证为空的情况提示的信息
invalidMessage 表示验证失败时提示的信息

• 触发验证

先来看看easyUI为我们生成的源码

可以看出我们定义的文本框ID和生成后的文本框不是同一个- -。。所以如果使用JS或者jQuery方式添加事件就比较麻烦,这里我们使用easyUI提供的方式添加事件。

以用户名输入框为例

    //userName类型是textbox
    $("#userName").textbox({
        //onChange事件-其他支持事件查看API
        onChange:function () {
                //调用当前对象组件的'enableValidation'方法开启验证
                $(this).textbox('enableValidation');
        }
    });

如果用提交form来触发表单下组件的验证

$('表单选择器').form('enableValidation');