您好,登錄后才能下訂單哦!
在使用jQuery Validation Engine的時候,我們除了使用自帶的API之外,還可以自己自定義正則驗(yàn)證。自定義正則驗(yàn)證上一篇已經(jīng)講過了,如果想使用自定義函數(shù)進(jìn)行驗(yàn)證怎么辦?其實(shí)這個控件有個bug,在api中說
也就是在我們需要進(jìn)行驗(yàn)證的地方加上funcCall[自定義函數(shù)名],但是我們會發(fā)現(xiàn)總會報錯,說找不到你這個函數(shù)名。其實(shí)它的要求是要添加required進(jìn)行綜合驗(yàn)證,也就是validate[required,funcCall[yorn]],這樣它才識別我們的自定義函數(shù)。但是我們就是不想要required這個呢?或者說我們在符合某種條件下才想讓required這個非空驗(yàn)證功能生效呢?
<textarea class="m-area add-tw validate[funcCall[yorn]]" id="remark" cols="30" rows="10" ></textarea>
那么就需要使用以下幾種方法綜合施行,網(wǎng)上老外的解決辦法就是在函數(shù)中push一個required,可以讓其正常執(zhí)行。
我定義了一個yorn的函數(shù),而基本格式就是function yorn(field, rules, i, options){},其中field代表的是你驗(yàn)證的那個元素,我這里驗(yàn)證的是textarea,那么field就代表的是textarea。
首先我講一下我要實(shí)現(xiàn)的功能,我的需求是在點(diǎn)擊不通過且備注為空的時候觸發(fā)驗(yàn)證,提示“必須填寫內(nèi)容”。那么在通過備注為空,通過備注不為空,不通過備注不為空的情況下都不能觸發(fā)驗(yàn)證提示信息。而如果validate[required]這樣的話,只要不填寫備注信息都會觸發(fā)提示信息。所以我的思路是,當(dāng)點(diǎn)擊保存按鈕的時候判斷,點(diǎn)擊的是哪個radio,點(diǎn)擊不通過的時候給不通過的radio添加一個自定義屬性,同時賦值。而當(dāng)點(diǎn)擊通過radio的時候刪除這個自定義屬性。然后接著進(jìn)入驗(yàn)證,也就是進(jìn)入自定義函數(shù),獲取到不通過radio的自定義屬性值,獲取到備注的value,然后判斷這兩個條件是否同時成立,如果條件成立,則首先rules.push('required');因?yàn)槲覀兦懊嬲f了如果想要實(shí)現(xiàn)自定義函數(shù)驗(yàn)證必須要有required,然后接著return options.allrules.required.alertText; 這句話是什么意思呢?就是返回你要提示的信息。而這個提示信息則另有地方進(jìn)行設(shè)置。
html文件,validate[funcCall[yorn]]設(shè)置自定義函數(shù)validate[funcCall[自定義函數(shù)名]]
<form id="approval">//這個驗(yàn)證控件必須有form <div class="name-ipt"> <div class="m-name"><span>意見:</span></div> <input type="radio" name="trial" class="m-radio col" />通過 <input type="radio" name="trial" class="m-radio col" id="nocheck"/>不通過 </div> <div class="name-ipt"></div> <div class="area-ipt add-td"> <div class="m-name"><span>備注:</span></div> <textarea class="m-area add-tw validate[funcCall[yorn]]" id="remark" cols="30" rows="10"></textarea> <span class="m-span add-stl">剩余可輸入1000字</span> </div> </div> </form> <div class="add-sb"> <a href="#" class="save-btn m" ng-click="saveAudit()" >保存</a> </div> (有效:步驟1)
因?yàn)槲沂怯玫腶ngular,所以給保存一個事件,在點(diǎn)擊保存的時候觸發(fā)事件,然后判斷兩個radio哪個被checked,其他的上面說過。接著觸發(fā)驗(yàn)證進(jìn)入自定義函數(shù)中。、、
//自己js文件中寫 //保存 $scope.saveAudit = function(){ if($('#nocheck').attr('checked')){ $("#remark").attr("trialAttr",'N'); }else{ $("#remark").removeAttr('trialAttr'); } if($('#approval').validationEngine('validate')){ //驗(yàn)證通過的話之后要執(zhí)行的內(nèi)容 } } (有效:步驟2)
自定義函數(shù)必須帶rules.push('required');同時return options.allrules.required.alertText;這個自定義函數(shù)寫在自己的js文件里就行
//自己的js文件中寫 function yorn(field, rules, i, options){ var trialAttr = field.attr("trialAttr") ; var textareaval = field.val(); if(trialAttr == "N" && textareaval==''){ rules.push('required'); return options.allrules.required.alertText; } } (有效:步驟3)
接下來要設(shè)置自定義提示信息了,找到j(luò)query.validationEngine-zh_CN.js文件,然后在最下面自己跟隨一個對象,函數(shù)名在前面,后面alertText后跟你要提示的信息。這樣就OK了。
//這個在jquery.validationEngine-zh_CN.js中寫
(有效:步驟4)
之前我在這個文件的下面按照api自定義了一個函數(shù),但是發(fā)現(xiàn)根本無法執(zhí)行,因?yàn)楫?dāng)進(jìn)入驗(yàn)證的時候,首先判斷validate[required,funcCall[yorn]]的自定義函數(shù)中是否存在required,如果不存在就無法進(jìn)入到j(luò)query.validationEngine-zh_CN.js這個文件中執(zhí)行我們內(nèi)部定義的函數(shù)。但是如果把自定義函數(shù)放在我們自己的js中,就會先執(zhí)行我們自己js文件中的函數(shù),最后才判斷是否存在required,而這個時候我們已經(jīng)push進(jìn)去了,所以就不會報錯說找不到你自定義函數(shù)名了。
(這個是無效且不可執(zhí)行的,不要用)
這個驗(yàn)證控件其實(shí)挺不錯的,只是這個bug給搞了半天,還好網(wǎng)上有解決辦法,但是貌似沒有一個像我說的這么清楚的,都是點(diǎn)明一下而已。希望能夠幫助到大家,同時自己留存以后用。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。