JavaScript驗證整個表單

來源:互聯網
上載者:User
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 警告資訊。在這個情況中,如果使用者輸入了數字以外的字元,我們不會自動發送錯誤資訊。

一旦使用者認為她已經完成了整個表單,那麼她就可以按下 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 框,它根據使用者輸入的美國各州的編碼計算銷售所得稅。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。