提交表單后,需要對信息進行驗證。表單的驗證有兩種:客戶端驗證和服務器驗證。
?
(
1
)表單的客戶端驗證
??????
表單的客戶端驗證主要是通過
JavaScript
來完成的。
<html>
<head>
<title>
客戶端驗證
</title>
<Script>
function Check()
{
??? username=document.form1.username.value;
??? age=document.form1.age.value;
??? year=document.form1.year.value;
??? email=document.form1.email.value;
?
?
?
??? <!--
驗證提交數(shù)據(jù)的長度
-->
??? if(username.length<2||username.length>8)
??? {
????? alert("
用戶名長度必須在
2
位到
8
位之間
");
????? return false;
??? }
?
??? <!--
驗證提交數(shù)據(jù)的范圍
-->
??? if(age.length!=2||isNaN(age)||parseInt(age)<20||parseInt(age)>50)
??? {
????? alert("
你的年齡不符合我們的要求!
");
????? return false;
??? }
?
??? <!--
驗證提交數(shù)據(jù)的類型
-->
??? <!--
限定出生年份是一個
4
位整數(shù)
-->
??? if(year.length!=4||isNaN(year))
??? {
????? alert("
年份填寫不正確!
");
????? return false;
??? }
??? <!--
限定電子郵箱不能為空,且必須要有“
@
”和“
.
”
-->
??? if(email.length==""||(email.indexOf('@')==-1)||(email.indexOf('.')==-1))
??? {
????? alert("
電子郵件填寫不正確!
");
????? return false;
??? }
??? return true;
}
</Script>
</head>
<body>
<h3>
客戶端驗證
</h3>
<form name="form1" action="X.jsp" OnSubmit="return Check();">
<p>
用
戶
名:
<input name="username"></p>
<p>
年
齡:
<input name="age"></p>
<p>
出生年份:
<input name="year"></p>
<p>
電子郵件:
<input name="email"></p>
<p><input type=Submit value="
提交
"></p>
</form>
</body>
</html>
?
(
2
)表單的服務器端驗證
??????
表單的服務器端驗證是通過服務器端的
X.jsp
來完成的。
<html>
<head>
<title>A Form</title>
</head>
<body>
<h3>The form will be checked by the Server.</h3>
<form name="fm" action="XXX.jsp" method="post">
? <p>UserName:
??? <input type="text" name="username">
? </p>
? <p>PassWord:
??? <input type="password" name="password">
? </p>
? <p>BirthYear:
??? <input type="text" name="birthyear">
? </p>
? <p><center>
??? <a href='JavaScript:fm.submit();'>
提交
</a>
??? <a href='JavaScript:fm.reset();'>
重置
</a>
? </center></p>
</form>
</body>
</html>