JavaScript 表單驗(yàn)證
表單的輸入框、下拉框等可以接收用戶輸入,所以用JavaScript來操作表單,可以獲得用戶輸入的內(nèi)容,或者對(duì)一個(gè)輸入框設(shè)置新的內(nèi)容。
HTML表單的輸入控件主要有以下幾種:
文本框,對(duì)應(yīng)的<input type="text">,,用于輸入文本;
單選框,對(duì)應(yīng)的<input type="radio">,用于選擇一項(xiàng);
復(fù)選框,對(duì)應(yīng)的<input type="checkbox">,用于選擇多項(xiàng);
下拉框,對(duì)應(yīng)的<select>,用于選擇一項(xiàng);
隱藏文本,對(duì)應(yīng)的<input type="hidden">,用戶不可見,但表單提交時(shí)會(huì)把隱藏文本發(fā)送到服務(wù)器。
JavaScript 表單驗(yàn)證
JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。
表單數(shù)據(jù)經(jīng)常需要使用 JavaScript 來驗(yàn)證其正確性:
驗(yàn)證表單數(shù)據(jù)是否為空?
驗(yàn)證輸入是否是一個(gè)正確的email地址?
驗(yàn)證日期是否輸入正確?
驗(yàn)證表單輸入內(nèi)容是否為數(shù)字型?
下面的函數(shù)用來檢查用戶是否已填寫表單中的必填(或必選)項(xiàng)目。假如必填或必選項(xiàng)為空,那么警告框會(huì)彈出,并且函數(shù)的返回值為 false,否則函數(shù)的返回值則為 true(意味著數(shù)據(jù)沒有問題):
function CheckForm()
{?
if (document.form.name.value.length == 0) {?
alert("請(qǐng)輸入您姓名!");
document.form.name.focus();
return false;
}
return true;
}
中文/英文/數(shù)字/郵件地址合法性判斷:
function isEnglish(name) //中文值檢測(cè)
{?
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {?
if(name. charCodeAt(i) > 128)
return false;
}
return true;
}
function isChinese(name) //中文值檢測(cè)
{?
if(name.length == 0)
return false;
for (i = 0; i < name.length; i++) {?
if(name.charCodeAt(i) > 128)
return true;
}
return false;
}
function isMail(name) // E -mail值檢測(cè)
{?
if(! isEnglish(name))
return false;
i = name.indexOf(" at ");
j = name dot lastIndexOf(" at ");
if(i == - 1)
return false;
if(i != j)
return false;
if(i == name 點(diǎn)長(zhǎng))
return false;
return true;
}
function isNumber(name) // 數(shù)值檢測(cè)
{?
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {?
if(name.charAt(i) < "0" || name. charAt(i) > "9")
返回 false;
}
返回 true;
}
function CheckForm()
{?
if(! isMail(form.Email.value)) {?
alert("您的電子郵件不合法!");
form.Email.focus();
return false;
}
if(!isEnglish(form.name.value)) {?
alert("中文名不合法!");
form.name.focus();
return false;
}
if(!isChinese(form.cnname.value)) {?
alert("中文名不合法!");
form.cnname.focus();
返回 false;
}
if(! isNumber(form.PublicZipCode.value)) {?
alert("郵政編碼不合法!");
form.PublicZipCode.focus();
return false;
}
return true;
}