【前端插件】表單驗證（結果綁定按鈕可用狀態）

1 修改記錄

時間	描述
2017-06-05	編寫
2017-09-05	修復表單無驗證規則按鈕依舊不可用的BUG 修復其他BUG 刪減說明文檔

2 正文內容

按鈕的可用狀態綁定到表單的驗證結果，如果表單驗證不通過，按鈕就不可用。

• 需要用到Bootstrap的btn-primary樣式（也可以使用自定義的按鈕樣式）；
• 需要使用jQuery Validate插件

2.1 設計CSS樣式

可用狀態的樣式可以選擇Bootstrap（如btn、btn-primary等）或自定義樣式，禁用狀態需要自定義控制一下。因爲僅僅一個disabled屬性無法禁止按鈕的hover事件。
禁用狀態下的按鈕不管是對它做任何操作，樣式都不應該改變。這裏統一了靜態樣式和hover樣式。

.f-btn-disabled, .f-btn-disabled:hover{
    color:#bbb;/*字體顏色統一*/
    background-color:#f7f7f7;/*背景顏色統一*/
    border-color:#ddd;/*邊框顏色統一*/
}

2.2 綁定JS代碼

按鈕可用狀態綁定表單驗證結果，需要注重兩件事：

1. 頁面加載時對錶單進行首次驗證：驗證通過，按鈕置爲可用；存在錯誤信息，則將錯誤信息集合保存到變量（errors）中，並將按鈕置爲不可用；
2. 對錶單項進行驗證時：驗證通過，則刪除該表單項在表單項在變量errors中的錯誤信息，並判斷errors是否爲空，爲空則將按鈕置爲可用；驗證失敗，則將該表單項的錯誤保存到errors中，並將按鈕置爲不可用

/**FromValidate
 * 表單驗證函數。對指定表單根據驗證規則進行驗證，驗證通過，則按鈕可用；否則不可用
 * @param form 表單對象
 * @param validation 驗證規則
 * @param btn 綁定的按鈕對象
 */
var FormValidate = function(form, validation, btn) {
    /**首次驗證標識
     * false表示首次驗證。初始化時默認對目標表單進行首次驗證，然後將標識改爲true
     */
    let isFirst=true;

    /**錯誤集合
     * jQuery Validate插件的驗證規則中有一個名爲showErrors的方法，在對錶單或表單項進行驗證時會觸發。
     * 
     * 該方法帶有兩個參數：errorMap和errorList，其中errorMap就是JSON格式的，以表單項name作爲鍵
     * 名保存了該表單項的錯誤信息。但需要注意，對錶單進行驗證時，errorMap保存的是表單被所有的錯誤信息；而對
     * 表單項進行驗證時，errorMap只會保存當前表單項的錯誤信息。
     * 
     * 可以利用這個規則，在頁面加載時就對錶單進行首次驗證，保存所有錯誤信息。然後監聽表單動作，分別對每個表單項進
     * 行驗證，通過則刪去該表單項的錯誤信息，直至該集合爲空。
     */
    let errors={};

    let $btn={
        disabled:function() {
            btn.attr("disabled", "disabled");
            btn.addClass("f-btn-disabled");
            btn.removeClass("btn-primary");
        },
        accessible:function() {
            btn.removeAttr("disabled");
            btn.removeClass("f-btn-disabled");
            btn.addClass("btn-primary");
        }
    };

    let v={
        onsubmit:true,// 提交時驗證
        debug:true,// 只驗證不提交
        errorPlacement:function(error, element) {
            $(element).attr("title", error[0].textContent);
        },
        /**處理錯誤信息
         * 該函數在驗證表單或表單項時，不管是否存在錯誤，都會觸發。errorMap是JSON格式的數據，以表單項
         * 的name爲鍵名存放了當前驗證產生的錯誤信息。但是需要注意的是，驗證整個表單時errorMap存放的是
         * 所有表單項的錯誤信息；驗證單個表單項時errorMap存放的是該表單項的錯誤信息。而且，errorMap
         * 每個表單項最多隻保存一個錯誤。
         * jQuery Validate爲了方便提供了一個defaultShowErrors()方法調用默認方法顯示錯誤。
         * 劃重點：success方法的回調是放在showLabel方法裏面的，而後者放在defaultShowErrors
         * 方法裏面。
         * 
         * 如果是首次驗證觸發，存在錯誤則按鈕置爲禁用狀態，保存錯誤信息並修改首次驗證標識；否則按鈕置爲可用
         * 狀態；
         * 如果是非首次驗證觸發，即驗證表單項觸發，存在錯誤則調用defaultShowErrors方法顯示錯誤，按
         * 鈕置爲禁用狀態，並保存當前表單項的錯誤；不存在錯誤，則表明當前表單項驗證通過，會觸發success方
         * 法，在該方法內刪除該表單項的錯誤。
         */
        showErrors:function(errorMap, errorList) {
            if(isFirst) {
                if(0<Utils.getJsonLength(errorMap)) {
                    $btn.disabled();
                    errors=errorMap;
                    isFirst=false;
                }else $btn.accessible();
            }else {
                this.defaultShowErrors();
                if(0<Utils.getJsonLength(errorMap)) {
                    $.extend(true, errors, errorMap);
                    $btn.disabled();
                }
            }
        },
        /**表單項驗證通過
         * 該函數只在對單個表單項進行單獨驗證時會觸發。element是表單項HTML字符串，需要手動轉化成DOM
         * 對象。
         * 
         * 表單項驗證成功後，刪除該表單項在錯誤集合errors中的內容。然後判斷集合是否爲空，爲空說明整個所
         * 有表單項都驗證通過，按鈕置爲可用狀態。
         */
        success:function(label, element) {
            delete errors[$(element).prop("name")];
            if(Utils.getJsonLength(errors)<=0) $btn.accessible();
        },
        rules: {},
        messages:{}
    };
    $.extend(true, v, validation);

    // 綁定表單和驗證規則
    form.validate(v);

    // 首次驗證表單
    form.valid();
}

var Utils = {
    getJsonLength:function(json) {
        let l=0;
        for(let item in json)
            l++;
        return l;
    },
    getJsonKeys:function(json) {
        let array=new Array();
        let index=0;
        for(let key in json)
            array[index++]=key;
        return array;
    },
    updateJArray:function(jarray, json) {
        for(let i in jarray) {
            $.extend(false, jarray[i], json);
        }
        return jarray;
    }
}

2.3 使用方法

　　參數validation可以爲null，也可以自定義。

$().ready(function() {
    FormValidate($("form"), {
        rules:{
        },
        messages:{
        }
    }, $("#btn_registerCommit"))
});