Easyui validatebox修改

1.當text發生變化時在校驗：

      Easyui validatebox個人感覺還是比較好用的，但是發現他不是只有text改變並離開編輯框的時候才驗證，而是不停的做驗證；如果是js腳本的本地驗證還好，如果是遠程驗證（如：調用數據庫檢測信息是否已存在）那就不停的向服務器發送請求，這就比較麻煩啦；通過查看Easyui validatebox的js腳本文件，發現Easyui validatebox盡然是在編輯框獲得焦點之后，啟用了定時器來不停的做校驗的，郁悶！源碼如下：

box.unbind(".validatebox").bind("focus.validatebox",function(){
_2e9.validating=true;
(function(){
if(_2e9.validating){
_2ee(_2e8);
setTimeout(arguments.callee,200);
}
})();
})

找到問題，那就修改，將上面的代碼替換成下面的代碼，保證只在獲取焦點並且值為空或者值發生改變時進行校驗；

 box.unbind(".validatebox").bind("focus.validatebox", function() {
            if (box.val().length == 0) {
                _2e9.validating = true;
                if (_2e9.validating) {
                    _2ee(_2e8);
                }
            };
        }).bind("change.validatebox", function() {
            _2e9.validating = true;
            if (_2e9.validating) {
                _2ee(_2e8);
            } 
        })

2.取消校驗：

       當把包含Easyui validatebox的div轉換成dialog顯示時，如果本次的校驗未通過，然后取消了本次操作，那么本次的校驗會保留，如果在打開dialog重新賦空值或正確的值，但是還是顯示驗證未通過，給用戶造成錯覺，但是Easyui validatebox並不提供取消校驗的方法，查看源碼發現可以通過如下方式取消驗證不通過的標識（那個紅色感嘆號和錯誤消息），為了更好的控制，這條語句的設計是一次取消一個validatebox的驗證標識（elemId為validatebox的id）

$("#" + elemId).removeClass('validatebox-invalid');

3.擴展自定義驗證：

            Easyui validatebox提供了驗證方式的擴展，但是如果一次擴展一條的話，沒新增有一種就需要該一次js文件，比較麻煩，我做了一個正則表達式效驗，這樣使用時只需要在相應的Easyui validatebox的aspx頁面的定義是加入效驗的偵測表達式即可，源碼如下：

    $.extend($.fn.validatebox.defaults.rules, {
           custom_reg: {
            validator: function(value, param) {
                var m_reg = new RegExp(param[0]); <span style="color:#ff0000;">//傳遞過來的正則字符串中的"\"必須是"\\"
</span>                if (!m_reg.test(value)) {
                    $.fn.validatebox.defaults.rules.custom_reg.message = param[1];
                    return false;
                }
                else {
                    return true;
                }
            },
            message: ''
        }
       });

使用方式如下：（兩個參數，第一個是正則表達式，第二個是錯誤提示信息）

<pre class="html" name="code"><input id="txt_CustPhone" class="easyui-validatebox txt-number" <span style="color:#ff0000;">validType="custom_reg['^1\d{10}</span><span style="color:#ff0000;">,'手機號碼必須是11位數字！']" missingMessage="請輸入客戶電話！"</span> style="width:150px" required="true"/></pre>
<pre></pre>
<p>下面這個是遠程效驗（<span style="color:#ff0000">這塊使用的是同步模式，使用異步會在服務器返回值之前返回校驗的結果值）；</span></p>
<pre class="javascript" name="code">$.extend($.fn.validatebox.defaults.rules, {
        custom_remote: {
            validator: function(value, param) {
                var postdata = {};
                postdata[param[1]] = value;
                var m_result =$.ajax({ type: "POST",//http請求方式
                    url: param[0],    //服務器段url地址
                    data:postdata,      //發送給服務器段的數據
                    dataType: "type", //告訴JQuery返回的數據格式
                    async: false
                }).responseText;
                if (m_result == "False") {
                    $.fn.validatebox.defaults.rules.custom_remote.message = param[2];
                    return false;
                }
                else {
                    return true;
                }
            },
            message: ''
        }</pre>
<p> </p>
<p>用方式如下：（三個參數，第一個是調用的url，第二個是傳遞給服務器的參數名稱，第三個是錯誤提示信息） </p>
<pre class="html" name="code"><input id="txt_cardid" <span style="color:#ff0000;">class="easyui-validatebox txt-number" required="true" missingMessage="請輸入卡號！"
 validType="custom_remote['member.ashx?method=check_cardid','cardid','輸入的卡號已使用！']" </span>style="width:150px"/></pre>
<p>以下是前兩個的結合，先用正則表達式本地驗證，通過后在發送服務器驗證;</p>
<pre class="javascript" name="code"> $.extend($.fn.validatebox.defaults.rules, {
        Composite_validation:
        {
            validator: function(value, param) {
                var m_reg = new RegExp(param[0]); //傳遞過來的正則字符串中的"\"必須是"\\"
                if (!m_reg.test(value)) {
                    $.fn.validatebox.defaults.rules.Composite_validation.message = param[1];
                    return false;
                }
                else {
                    var postdata = {};
                    postdata[param[3]] = value;
                    var result = $.ajax({
                        url: param[2],
                        data: postdata,
                        async: false,
                        type: "post"
                    }).responseText;
                    if (result == "False") {
                        $.fn.validatebox.defaults.rules.Composite_validation.message = param[4];
                        return false;
                    }
                    else {
                        return true;
                    }
                }
            },
            message: ''
        }
    });</pre>
<p>用方式如下：（五個參數，第一個是正則表達式，第二個是錯誤提示信息，第三個是調用的url，第四個是傳遞給服務器的參數名稱，第五個是錯誤提示信息）</p>
<pre class="html" name="code">id="txt_CustIdentity" class="easyui-validatebox txt-number" style="width:150px" 
<span style="color:#ff0000;">validType="Composite_validation['^\\d{14}(\\d{1}|\\d{4}|\\d{3}x),'身份證號碼為15或18位數字！','member.ashx?method=check_Identityid','Identityid','該身份證號已辦卡！']" missingMessage="請輸入身份證號碼！" </span>required="true" /></pre>
<pre></pre>
<p><span style="font-size:24px"><strong></strong></span> </p>
<p><span style="font-size:24px"><strong>備注：本人水平有限，如有錯誤，歡迎大家拍磚及留言指正</strong> </span>
</p>

 

 

使用方式如下：（兩個參數，第一個是正則表達式，第二個是錯誤提示信息）