JavaScript 表單驗(yàn)證

表單的輸入框、下拉框等可以接收使用者輸入，所以用JavaScript來操作表單，可以得到使用者輸入的內(nèi)容，或是對(duì)一個(gè)輸入框設(shè)定新的內(nèi)容。

HTML表單的輸入控制項(xiàng)主要有以下幾種：

文字框，對(duì)應(yīng)的<input type="text">，，用於輸入文字；

單選框，對(duì)應(yīng)的<input type="radio">，用於選擇一項(xiàng)；

##複選框，對(duì)應(yīng)的<input type="checkbox">

，用於選擇多項(xiàng)；

下拉框，對(duì)應(yīng)的<select>

，用於選擇一項(xiàng)；

隱藏文本，對(duì)應(yīng)的<input type="hidden">

，使用者不可見，但表單提交時(shí)會(huì)把隱藏文字送到伺服器。

JavaScript 表單驗(yàn)證

JavaScript 可用來在資料送到伺服器前對(duì) HTML 表單中的這些輸入資料進(jìn)行驗(yàn)證。

表單資料經(jīng)常需要使用 JavaScript 來驗(yàn)證其正確性：

驗(yàn)證表單資料是否為空？

驗(yàn)證輸入是否是一個(gè)正確的email位址？
驗(yàn)證日期是否輸入正確？
驗(yàn)證表單輸入內(nèi)容是否為數(shù)字型？

下面的函數(shù)用來檢查使用者是否已填入表單中的必填（或必填）項(xiàng)目。假如必填或必選項(xiàng)為空，那麼警告框會(huì)彈出，並且函數(shù)的回傳值為false，否則函數(shù)的回傳值則為true（表示資料沒有問題）：

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) // 電子郵件值偵測(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 == 名稱點(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")
return false;
}
return true;
}

function CheckForm()
{?
if(! isMail(form.Email.value)) {?
alert("您的電子郵件不合法！ isEnglish(form.name.value)) {?
alert("中文名稱不合法！");
form.name.focus();
return false;
}
if( !isChinese(form.cnname.value)) {?
alert("中文名稱不合法！");
form.cnname.focus();
return false;
}
if (!isNumber(form.PublicZipCode.value)) {?
alert("郵遞區(qū)號(hào)不合法！");
form.PublicZipCode.focus();
return false;
}
傳回true;
}

繼續(xù)學(xué)習(xí)

||

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <script type="text/javascript"> function $(id) { return document.getElementById(id); } function check() { var email = $("email").value; var password = $("password").value; var repassword = $("repassword").value; var name = $("name").value; $("emailinfo").innerHTML = ""; $("passwordinfo").innerHTML = ""; $("repasswordinfo").innerHTML = ""; $("nameinfo").innerHTML = ""; if(email == "") { $("emailinfo").innerHTML = "Email值不能為空"; $("email").focus(); return false; } if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { $("emailinfo").innerHTML = "郵箱格式不正確,必須包含@和."; $("email").focus(); return false; } if(password == "") { $("passwordinfo").innerHTML = "密碼不能為空"; $("password").focus(); return false; } if(password.length < 6) { $("passwordinfo").innerHTML = "密碼長(zhǎng)度必須大于或者等于6"; $("password").focus(); return false; } if(repassword != password) { $("repasswordinfo").innerHTML = "兩次輸入的密碼不一致"; $("repassword").focus(); return false; } if(name == "") { $("nameinfo").innerHTML = "姓名不能為空"; $("name").focus(); return false; } for(var i = 0; i < name.length; i++) { var j = name.subString(i , i+1); if(isNaN(j) == false) { $("nameinfo").innerHTML = '姓名中不能包含數(shù)字'; $("name").focus(); return false; } } } </script> </head> <body> <form name="login_form" method="post" onsubmit="return check()"> <div> Email:<input type="text" name="email" id="email"/><span id="emailinfo"></span> </div> <br> <div> 密碼:<input type="password" name="password" id="password" /><span id="passwordinfo"></span> </div> <br> <div> 重輸密碼:<input type="password" name="repassword" id="repassword" /><span id="repasswordinfo"></span> </div> <br> <div> 姓名：<input type="text" name="name" id="name" /><span id="nameinfo"></span> </div> <br> <div> <input type="submit" value="注冊(cè)" /> </div> </form> </body> </html>

提交重置程式碼
自動(dòng)運(yùn)行