本篇文章主要介紹 JQuery validate 驗證失敗後回撥自定義方法，並顯示自定義樣式。

JQuery validate需求

假設我想在使用 validate 基礎上實現一個這麼樣的功能： 校驗失敗後，修改特定的樣式，比如：我想校驗錯誤之後，將下面的輸入框input-group 完全變紅，並不是簡單的插入提示，或者只是給input一個css類，而是出現錯誤之後，操作DOM；並且在我修正後輸入框內容後，也就是驗證成功之後，再恢復原先樣式。

此處就用到兩個知識點： 校驗失敗之後，回撥自定義方法（showerros）——顯示特定錯誤提示；校驗成功後回撥方法（successs）——顯示驗證成功樣式。

回撥自定義方法及自定義錯誤顯示

要想實現在框架的基礎上實現，驗證失敗回撥指定方法，我們需要 複寫（Override） showErrors 。

showErrors （errorMap, errorList）
方法名：showErrors

引數 ： errorMap, errorList

描述： 處理錯誤的方法。 在驗證錯誤後，會呼叫該方法，通過這個方法顯示錯誤資訊。
errorMap ：json資料，key ： input’s id, value : message(定義的錯誤資訊提示)
errorList ： 校驗錯誤的元素列表

注意：

在使用的時候，除了 編寫自定義的錯誤處理方法外，建議

在方法裡 呼叫一下外掛預設方法，這樣才能保證 ： 外掛的正常提示，隱藏提示，監聽輸入框等功能。 也就是：this.defaultShowErrors();

下面是處理例項：

// 提示圖示
var errorIcon = '<i aria-hidden="true" class="fa fa-exclamation-triangle"></i>';

// 定義校驗器，將表單validate 外掛
var validator = $('#daily_form').validate({

    // 錯誤插入位置，以及插入的內容
    errorPlacement: function
 
(error,element) {
        $(element).parent().after(error);
    },

    // 表單對應欄位的錯誤提示資訊
    messages: {
        dailyAdd_title: {
            required: errorIcon + "請填寫日報標題",
        },
        dailyAdd_img: {
            required: errorIcon + "請選擇日報圖片",
        },
        dailyAdd_askId:{
            required: errorIcon + "請填寫問題Id",    
        }
    },

    //使用div標籤，包裹提示資訊，而後插入DOM
    wrapper:"div",

    //單條校驗失敗，後會呼叫此方法，在此方法中，編寫錯誤訊息如何顯示 及  校驗失敗回撥方法
    showErrors : function(errorMap, errorList) {
        // 遍歷錯誤列表
        for(var obj in errorMap) {
            // 自定義錯誤提示效果
            $('#' + obj).parent().addClass('has-error');
        }
        // 此處注意，一定要呼叫預設方法，這樣保證提示訊息的預設效果
        this.defaultShowErrors();
    },

    // 驗證成功後呼叫的方法
    success:function(label) {
        $(label).parent().prev().removeClass('has-error');
    }

    //點選提交按鈕，校驗失敗後，會呼叫此方法
    /*invalidHandler: function(form, validator) {
        console.log("");
    },*/
});

“錯誤處理”其他處理方法

下面這些方法，是baidu,google 提供的處理方法，不建議這樣處理，費時，費力。

• 做法① ： 修改外掛原始碼

外掛的原始碼中，處理錯誤的方法，放在check裡，所以這種做法的邏輯就是： 在check中新增邏輯，在驗證失敗的時候，呼叫回撥方法。而後我們再 自定義一個 callback，這樣就能夠回撥到我們自己自定義的方法。

缺點：
我們使用框架，儘量使用外掛的原生API，原生提供下，我們儘量使用原生。

邏輯程式碼：

//  在check中修改此處程式碼
if (!c) {
   //return this.formatAndAdd(b, e), !1
   this.formatAndAdd(b, e);
   var errorCallback=this.settings.fail;
   if($.type(errorCallback)==='function'){
      errorCallback(b,e);
   }
   return false;
}

//而後自定義 errorCallbcak方法。
//詳情可參考： http://blog.csdn.net/huang100qi/article/details/52619227

• 做法② ： 給輸入框繫結事件 keyup（外掛中，繫結的便是keyup事件）

 //自定義校驗失敗之後回撥
$('#daily_form input').keyup(function(){
    if(! $(this).valid()) {
        // 自定義錯誤處理樣式，並顯示錯誤訊息
        $(this).parent().addClass('has-error');
    } else {
        // 驗證成功後刪除
        $(this).parent().removeClass('has-error');
    }
})

最後附上效果圖：

我們後臺開發使用的是bdp框架，開始覺得可以自己驗證，覺得好神奇，遍研究了一下。直到遇到這個問題——自定義錯誤處理方法，解決不了，而後各種百度，google，沒有找到解決方案，輾轉反側，在一個API 介紹中，找到了該方法。 故，予以記之。

看到其他方案的時候，我就一直在想 ，優秀的外掛怎麼會沒有常用的API ！ 深感懷疑，沒有放棄找解決，最後，終於被我找到了。

2017-05-09 來自患有強迫症的精神病人

參考博文