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


修改記錄

序號 時間 描述
1 2017-06-05 編寫

前言

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

  • 需要用到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");
}
},
...

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com