1.當(dāng)text發(fā)生變化時在校驗：
??????Easyui validatebox個人感覺還是比較好用的，但是發(fā)現(xiàn)他不是只有text改變并離開編輯框的時候才驗證，而是不停的做驗證；如果是js腳本的本地驗證還好，如果是遠程驗證（如：調(diào)用數(shù)據(jù)庫檢測信息是否已存在）那就不停的向服務(wù)器發(fā)送請求，這就比較麻煩啦；通過查看Easyui validatebox的js腳本文件，發(fā)現(xiàn)Easyui validatebox盡然是在編輯框獲得焦點之后，啟用了定時器來不停的做校驗的，郁悶！源碼如下：
[javascript]?view plaincopy
box.unbind(".validatebox").bind("focus.validatebox",function(){?? _2e9.validating=true;?? (function(){?? if(_2e9.validating){?? _2ee(_2e8);?? setTimeout(arguments.callee,200);?? }?? })();?? })??
找到問題，那就修改，將上面的代碼替換成下面的代碼，保證只在獲取焦點并且值為空或者值發(fā)生改變時進行校驗；
[javascript]?view plaincopy
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.取消校驗：
?????? 當(dāng)把包含Easyui validatebox的div轉(zhuǎn)換成dialog顯示時，如果本次的校驗未通過，然后取消了本次操作，那么本次的校驗會保留，如果在打開dialog重新賦空值或正確的值，但是還是顯示驗證未通過，給用戶造成錯覺，但是Easyui validatebox并不提供取消校驗的方法，查看源碼發(fā)現(xiàn)可以通過如下方式取消驗證不通過的標(biāo)識（那個紅色感嘆號和錯誤消息），為了更好的控制，這條語句的設(shè)計是一次取消一個validatebox的驗證標(biāo)識（elemId為validatebox的id）
$("#" + elemId).removeClass('validatebox-invalid');
3.擴展自定義驗證：
??????????? Easyui validatebox提供了驗證方式的擴展，但是如果一次擴展一條的話，沒新增有一種就需要該一次js文件，比較麻煩，我做了一個正則表達式效驗，這樣使用時只需要在相應(yīng)的Easyui validatebox的aspx頁面的定義是加入效驗的偵測表達式即可，源碼如下：
[javascript]?view plaincopy
????$.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:?''?? ????????}?? ???????});??
使用方式如下：（兩個參數(shù)，第一個是正則表達式，第二個是錯誤提示信息）
[javascript]?view plaincopy
<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位數(shù)字！']"?missingMessage="請輸入客戶電話！"</span>?style="width:150px"?required="true"/></pre>?? <pre></pre>?? <p>下面這個是遠程效驗（<span?style="color:#ff0000">這塊使用的是同步模式，使用異步會在服務(wù)器返回值之前返回校驗的結(jié)果值）；</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",?? ????????????????????url:?param[0],?????? ????????????????????data:postdata,???????? ????????????????????dataType:?"type",??? ????????????????????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>用方式如下：（三個參數(shù)，第一個是調(diào)用的url，第二個是傳遞給服務(wù)器的參數(shù)名稱，第三個是錯誤提示信息）?</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>以下是前兩個的結(jié)合，先用正則表達式本地驗證，通過后在發(fā)送服務(wù)器驗證;</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>用方式如下：（五個參數(shù)，第一個是正則表達式，第二個是錯誤提示信息，第三個是調(diào)用的url，第四個是傳遞給服務(wù)器的參數(shù)名稱，第五個是錯誤提示信息）</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位數(shù)字！','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> ?
總結(jié)
以上是生活随笔為你收集整理的Easyui validatebox修改——1.当text发生变化时在校验，2.取消校验，3扩展自定义验证的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
