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');