問題描述

校驗需求：*為必填項，同時3個必填項還要做唯一校驗，即3個必填項唯一確定一條記錄

待校驗表單如下圖，

對於以上問題，需要3個必填項校驗通過，然後再做唯一校驗，之前我在黑名單型別欄位做唯一校驗

校驗規則

    varblack_form = $("#black_form").validate({
        rules: {
            'hpzl':{required: true},
            'hphm':{required: true,isCarNo:true},
            'hmdlx':{required: true,
                remote:{
                    async:false,
                    url: basePath+"vsas/black/isExit.do",     //後臺處理程式
                    type: "post",               //資料傳送方式
                    dataType: "json",           //接受資料格式   
                    data: {                     //要傳遞的資料
                        hpzl: function() { return $('#hpzl').val();},
                        hphmt: function() {return $('#hphmt').val();},
                        hphm: function() {return $('#hphm').val();},
                        hmdlx: function() {return $('#hmdlx').val();}
                     }
                }
            }
        },

        ......//錯誤資訊及資訊提示位置

    });
 

varblack_form = $("#black_form").validate({
    rules: {
        'hpzl':{required: true},
        // 'hphmt':{required: true},
        'hphm':{required: true,isCarNo:true},
        'hmdlx':{required: true,
             remote:{
                 async:false,
                 url: basePath+"vsas/black/isExit.do",     //後臺處理程式
                 type: "post",               //資料傳送方式
                 dataType: "json",           //接受資料格式   
                 data: {                     //要傳遞的資料
                     hpzl: function() { return $('#hpzl').val();},
                     hphmt: function() {return $('#hphmt').val();},
                     hphm: function() {return $('#hphm').val();},
                     hmdlx: function() {return $('#hmdlx').val();}
                 }
              }
          }
      },

      ......//錯誤資訊及資訊提示位置

});
 

表單提交時，

if($("#black_form").valid()){

... ...//邏輯程式碼

}

但是，測試時問題出現，就是我只選擇了【黑名單型別】提交，校驗通過了，後臺報錯了，經過排查發現校驗不是一個一個校驗的，開始看jQuery.validate的文件找到Validator物件element(element)方法：

element(element)是驗證單個元素是成功還是失敗，返回值是Boolean型別。

解決方式

所以，利用這個解決了以上問題，即，我先利用element(element)方法校驗【號牌種類】、【號牌號碼】這倆欄位，然後再執行表單校驗的方法。如下：

if(black_form.element($("#hpzl"))&&black_form.element($("#hphm"))&&$("#black_form").valid()){

... ...//邏輯程式碼

}
 

在本例中其實還用的另一個方法resetForm():把已驗證過得表單Form恢復到驗證前的狀態。

resetForm解決的問題：在做多個條件唯一校驗時，當輸入條件組合通過校驗，此時form狀態是校驗成功狀態，如果

其中某個條件內容變化時，我們應該重新校驗，但是valid()方法並沒有這麼做，form表單狀態依然是上次校驗的狀

態，我們就需要呼叫Validator的resetForm()方法來恢復form校驗前的狀態，重新呼叫valid()校驗。