修改記錄

前言

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

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

設計CSS樣式

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

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

綁定JS代碼

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

1. 表單項存在錯誤時按鈕不可用
2. 表單項全部驗證通過時按鈕可用

針對第1個問題，（1）頁面加載完成后就立即對表單進行驗證，（2）將所有錯誤信息都以name-errorInfo鍵值對的形式保存在一個JSON對象里面，（3）每驗證通過一個表單項，就根據表單項的name把錯誤信息刪除，直到JSON對象為空。

/**FromValidate
 * 表單驗證函數。對指定表單根據驗證規則進行驗證，驗證通過，則按鈕可用；否則不可用
 * @param form 表單對象
 * @param validation 驗證規則
 * @param btn 綁定的按鈕對象
 */
var FormValidate = function(form, validation, btn) {
    /**2 將所有錯誤信息都保存在JSON對象中
 * jQuery Validate插件的驗證規則中有一個名為showErrors的方法，在對表單或表單項進行驗證時會觸發。該方法帶有兩個參數：errorMap,和errorList，其中errorMap就是JSON格式的，以表單項name作為鍵名保存了該表單項的錯誤信息。但需要注意，對表單進行驗證時，errorMap保存的是表單被所有的錯誤信息；而對表單項進行驗證時，errorMap只會保存當前表單項的錯誤信息。可以利用這個規則，在頁面加載時就對表單進行驗證，保存所有錯誤信息
 */
    let errors={};
    let v = {
        onsubmit:true,// 提交時驗證
        //onfocusout:true,// 存在問題
        //onkeyup:true,// 存在問題
        //onclick:true,// 單擊時驗證。驗證下拉框等需要點擊的標簽時會報錯
        debug:true,// 只驗證不提交
        errorPlacement:function(error, element) {// 錯誤信息顯示
            $(element).closest("form").find("[for='"+element.attr("name")+"']").append(error);
        },
        /** 自定義錯誤的顯示：該函數只在對form進行統一驗證和對單個表單項進行單獨驗證時會觸發。前者會收集所有錯誤，后者只會收集當前表單項的錯誤 */
        showErrors:function(errorMap, errorList) {
            errors=errorMap;// 保存錯誤信息
            this.defaultShowErrors();// 調用默認的showErrors函數
        },
        /**3 驗證通過
 * 該函數只在對單個表單項進行單獨驗證時會觸發。element是表單項HTML字符串，需要手動轉化成DOM對象。驗證通過后，在errors中刪除該表單項的錯誤信息
 */
        success: function(label, element) {
            delete errors[$(element).prop("name")];
        },
        rules: {},
        messages:{}
    };
    /** 合並自定義驗證規則與默認規則 */
    $.extend(true, v, validation);
    /** 綁定表單和驗證規則 */
    form.validate(v);
    /**1 驗證表單
 * 當調用這個方法時，立即對表單進行驗證
 */
    form.valid();
}

但是上面的代碼有個問題，第一次對表單進行驗證時，將所有錯誤信息都存入errors；但此后對表單項進行單個驗證時，又會用當前表單項的錯誤信息覆蓋掉原來的errors內容。所以需要添加一個首次驗證標志：

    ...
    /** 首次驗證標識：為false表示首次驗證 */
    let isValidated=false;
    ...
        showErrors:function(errorMap, errorList) {
            /**非首次驗證
 * 驗證表單項時調用默認的錯誤顯示函數。這樣，在首次驗證表單時不會出現錯誤提示，而驗證表單項時會出現錯誤提示
 */
            if(isValidated) {
                this.defaultShowErrors();
            }else {
                errors=errorMap;
            }
        },
        ...

對於第2個問題，按鈕可用時沒有disabled屬性，樣式類包括btn-primary；按鈕不可用時，擁有disabled屬性，沒有btn-primary樣式類，而是擁有我們自定義的禁用樣式類f-btn-disabled。
判斷按鈕是否可用的標志就是存儲了所有表單項錯誤信息的errors是否為空。如果不為空，則按鈕不可用：

        ...
        showErrors:function(errorMap, errorList) {
            // 驗證失敗，按鈕不可用
            btn.attr("disabled", "disabled");
            btn.addClass("f-btn-disabled");
            btn.removeClass("btn-primary");

            if(isValidated) {
                this.defaultShowErrors();
            }else {
                errors=errorMap;
            }
        },
        ...

如果為空，則按鈕可用：

        ...
        success: function(label, element) {
            // 驗證成功:刪除表單項錯誤信息，判斷errors是否為空，為空則按鈕可用
            delete errors[$(element).prop("name")];
            if(JSONUtils.getLength(errors)<=0) {
                btn.removeAttr("disabled");
                btn.removeClass("f-btn-disabled");
                btn.addClass("btn-primary");
            }
        },
        ...