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