專業知識:JavaScript驗證整個表單
當前位置:點晴教程→知識管理交流
→『 技術文檔交流 』
不像域級有效性檢查(field-level validation),表單級有效性檢查(form-level validation)將整個表單上的某組(或全部)值作為一個整體分析其一致性。表單級有效性檢查一般發生在將一個已完成的HTML 表單提交給CGI 程序之前。我們這樣做是為了確保用戶在將數據發送至服務器之前,已經填寫了所有的必填域。
驗證整個表單其實相當簡單。在我們的例子當中,我們已經去除了大部份會自動彈出即時警告信息的域級有效性檢查。下面是一個例子: function isANumber(number) { answer = 1; if (!parseFloat(number)) { //the first digit wasn't numeric answer = 0; } else { //the first digit was numeric, so check the rest for (vari=0; i if ((number.charAt(i) != "0") && (!parseFloat(number.charAt(i)))) { answer = 0; break; } } } if (answer == 1) { orderPlaced = true; } return answer; } 上面的代碼,基本上是我們前面的數字檢查函數,只不過沒有JavaScript 警告信息。在這個情況中,如果用戶輸入了數字以外的字符,我們不會自動發送錯誤信息。來源:www.examda.com 一旦用戶認為她已經完成了整個表單,那么她就可以按下 Submit(提交)按鈕。在那個時候,我們就檢查每個域是否有遺漏,或是存有格式不正確的數據。 function validateForm() { varfixThis = ""; if (!(isANumber(document.orderForm.numberOrdered.value))) { fixThis += "Please enter a numeric value for the number of brains field.n"; } if (!(exists(document.orderForm.typeField.value))) { fixThis += "Please enter the type.n"; } if (!(exists(document.orderForm.stateField.value))) { fixThis += "Please enter the state.n"; } if (!(isAPhoneNumber(document.orderForm.phoneNumber.value))) { fixThis += "Please enter the phone number in the following format: (123)456-7890"; } if (fixThis != "") { alert(fixThis); } else { document.location.href = "thanks.html"; } } 這個函數檢查表單中所有的域,以確保每個域都包含有效的值。倘若它發現某個域缺少有效的數據,它就會在fixThis變量添加一個新的警告信息,然后再繼續下去。在最后,它要么彈出一個含有各種警告信息的窗口,就是傳送一個簡短的“Thank You”給用戶。 注意:這個例子檢查了表單中我們沒有提到的一部分——State 框,它根據用戶輸入的美國各州的編碼計算銷售所得稅。 該文章在 2010/11/28 14:20:08 編輯過 |
關鍵字查詢
相關文章
正在查詢... |