提交表单后,需要对信息进行验证。表单的验证有两种:客户端验证和服务器验证。
(
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;
<!--
验证提交数据的长度
-->
if(username.length<2||username.length>8)
{
alert("
用户名长度必须在
2
位到
8
位之间
");
return false;
}
<!--
验证提交数据的范围
-->
if(age.length!=2||isNaN(age)||parseInt(age)<20||parseInt(age)>50)
{
alert("
你的年龄不符合我们的要求!
");
return false;
}
<!--
验证提交数据的类型
-->
<!--
限定出生年份是一个
4
位整数
-->
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>