快捷導(dǎo)航

jQuery Validation Engine驗(yàn)證控件調(diào)用外部函數(shù)驗(yàn)證的方法

更新時(shí)間：2017年01月18日 13:55:00 作者：韓一寧

這篇文章主要介紹了jQuery Validation Engine驗(yàn)證控件調(diào)用外部函數(shù)驗(yàn)證的方法，需要的的朋友參考下吧

在使用jQuery Validation Engine的時(shí)候，我們除了使用自帶的API之外，還可以自己自定義正則驗(yàn)證。自定義正則驗(yàn)證上一篇已經(jīng)講過(guò)了，如果想使用自定義函數(shù)進(jìn)行驗(yàn)證怎么辦？其實(shí)這個(gè)控件有個(gè)bug，在api中說(shuō)

也就是在我們需要進(jìn)行驗(yàn)證的地方加上funcCall[自定義函數(shù)名]，但是我們會(huì)發(fā)現(xiàn)總會(huì)報(bào)錯(cuò)，說(shuō)找不到你這個(gè)函數(shù)名。其實(shí)它的要求是要添加required進(jìn)行綜合驗(yàn)證，也就是validate[required,funcCall[yorn]]，這樣它才識(shí)別我們的自定義函數(shù)。但是我們就是不想要required這個(gè)呢？或者說(shuō)我們?cè)诜夏撤N條件下才想讓required這個(gè)非空驗(yàn)證功能生效呢？

 <textarea class="m-area add-tw validate[funcCall[yorn]]" id="remark" cols="30" rows="10" ></textarea>

那么就需要使用以下幾種方法綜合施行，網(wǎng)上老外的解決辦法就是在函數(shù)中push一個(gè)required，可以讓其正常執(zhí)行。

我定義了一個(gè)yorn的函數(shù)，而基本格式就是function yorn(field, rules, i, options){}，其中field代表的是你驗(yàn)證的那個(gè)元素，我這里驗(yàn)證的是textarea，那么field就代表的是textarea。

首先我講一下我要實(shí)現(xiàn)的功能，我的需求是在點(diǎn)擊不通過(guò)且備注為空的時(shí)候觸發(fā)驗(yàn)證，提示“必須填寫內(nèi)容”。那么在通過(guò)備注為空，通過(guò)備注不為空，不通過(guò)備注不為空的情況下都不能觸發(fā)驗(yàn)證提示信息。而如果validate[required]這樣的話，只要不填寫備注信息都會(huì)觸發(fā)提示信息。所以我的思路是，當(dāng)點(diǎn)擊保存按鈕的時(shí)候判斷，點(diǎn)擊的是哪個(gè)radio，點(diǎn)擊不通過(guò)的時(shí)候給不通過(guò)的radio添加一個(gè)自定義屬性，同時(shí)賦值。而當(dāng)點(diǎn)擊通過(guò)radio的時(shí)候刪除這個(gè)自定義屬性。然后接著進(jìn)入驗(yàn)證，也就是進(jìn)入自定義函數(shù)，獲取到不通過(guò)radio的自定義屬性值，獲取到備注的value，然后判斷這兩個(gè)條件是否同時(shí)成立，如果條件成立，則首先rules.push('required');因?yàn)槲覀兦懊嬲f(shuō)了如果想要實(shí)現(xiàn)自定義函數(shù)驗(yàn)證必須要有required，然后接著return options.allrules.required.alertText; 這句話是什么意思呢？就是返回你要提示的信息。而這個(gè)提示信息則另有地方進(jìn)行設(shè)置。

html文件，validate[funcCall[yorn]]設(shè)置自定義函數(shù)validate[funcCall[自定義函數(shù)名]]

<form id="approval">//這個(gè)驗(yàn)證控件必須有form
      <div class="name-ipt">
        <div class="m-name"><span>意見(jiàn)：</span></div>
        <input type="radio" name="trial" class="m-radio col" />通過(guò)
        <input type="radio" name="trial" class="m-radio col" id="nocheck"/>不通過(guò)
      </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，所以給保存一個(gè)事件，在點(diǎn)擊保存的時(shí)候觸發(fā)事件，然后判斷兩個(gè)radio哪個(gè)被checked，其他的上面說(shuō)過(guò)。接著觸發(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)證通過(guò)的話之后要執(zhí)行的內(nèi)容
}
}
（有效：步驟2）

自定義函數(shù)必須帶rules.push('required');同時(shí)return options.allrules.required.alertText;這個(gè)自定義函數(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）

接下來(lái)要設(shè)置自定義提示信息了，找到j(luò)query.validationEngine-zh_CN.js文件，然后在最下面自己跟隨一個(gè)對(duì)象，函數(shù)名在前面，后面alertText后跟你要提示的信息。這樣就OK了。

//這個(gè)在jquery.validationEngine-zh_CN.js中寫

（有效：步驟4）

之前我在這個(gè)文件的下面按照api自定義了一個(gè)函數(shù)，但是發(fā)現(xiàn)根本無(wú)法執(zhí)行，因?yàn)楫?dāng)進(jìn)入驗(yàn)證的時(shí)候，首先判斷validate[required,funcCall[yorn]]的自定義函數(shù)中是否存在required，如果不存在就無(wú)法進(jìn)入到j(luò)query.validationEngine-zh_CN.js這個(gè)文件中執(zhí)行我們內(nèi)部定義的函數(shù)。但是如果把自定義函數(shù)放在我們自己的js中，就會(huì)先執(zhí)行我們自己js文件中的函數(shù)，最后才判斷是否存在required，而這個(gè)時(shí)候我們已經(jīng)push進(jìn)去了，所以就不會(huì)報(bào)錯(cuò)說(shuō)找不到你自定義函數(shù)名了。