序號 | 時間 | 描述 |
---|---|---|
1 | 2017-06-05 | 編寫 |
按鈕的可用狀態綁定到表單的驗證結果,如果表單驗證不通過,按鈕就不可用。
可用狀態的樣式可以選擇Bootstrap(如btn、btn-primary等)或自定義樣式,禁用狀態需要自定義控制一下。因為僅僅一個disabled屬性無法禁止按鈕的hover事件。
禁用狀態下的按鈕不管是對它做任何操作,樣式都不應該改變。這里統一了靜態樣式和hover樣式。
.f-btn-disabled, .f-btn-disabled:hover{
color:#bbb;/*字體顏色統一*/
background-color:#f7f7f7;/*背景顏色統一*/
border-color:#ddd;/*邊框顏色統一*/
}
按鈕可用狀態綁定表單驗證結果,需要解決兩件事:
針對第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");
}
},
...
本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。