這兩個驗證都是必須的，因為客戶端的驗證安全性不是太高，但是可以防止80%以上的用戶的誤操作，可以減輕服務(wù)器端的壓力，而且速度非?？欤脩趔w驗高。不要以為有了客戶端的驗證就不需要了服務(wù)器端的了，客戶端的驗證是很容易繞過去的，服務(wù)器端驗證安全性比較高，所以一般驗證兩個驗證都需要寫?！?/p>

例1、一個簡單示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單驗證簡單示例</title>
</head>
<head>
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
? //alert("姓名必須填寫");
? usernameerror.innerHTML="<font color='red'>姓名必須填寫</font>";
? return false;
? }
else{
? usernameerror.innerHTML="正確";
? return true;
? } ?
?
}
</script>
</head>
<body>
<!--?? ?
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
-->
<form name="myForm" onsubmit="return validateForm()" >
姓名: <input type="text" name="fname" id="username">
<span id="usernameerror"></span>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
?? ?
</body>
</html>

保存文件名為：表單驗證的例1.html

用瀏覽器運行測試之，效果如下：

例2、一個復(fù)雜點的示例

<!DOCTYPE html>
<html>
<head>
? <meta charset="UTF-8">
? <title>表單驗證示例注冊用戶</title>
??
? <style type="text/css">
? </style>
?
? <script>
? ? function checkusername()
? ? {
? ? ? var myform = document.getElementById("form1");
? ? ? var username = myform.username.value.length;
? ? ? if(username < 1||username>12)
? ? ? {
? ? ? ? errusername.innerHTML = "<font color='red'>用戶名不符合要求</font>";
? ? ? ? return false;
? ? ? }else{
? ? ? ? errusername.innerHTML = "<font color='green'>用戶名符合要求</font>";
? ? ? ? return true;
? ? ? }
? ? }
? ? function checkage()
? ? {
? ? ? var myform = document.getElementById("form1");
? ? ? var age = myform.age.value;
? ? ? if(age != parseInt(age))
? ? ? {
? ? ? ? errage.innerHTML = "<font color='red'>年齡不符合要求</font>";
? ? ? ? return false;
? ? ? }else{
? ? ? ? errage.innerHTML = "<font color='green'>年齡符合要求</font>";
? ? ? ? return true;
? ? ? }
? ? }
? ? function checkemail()
? ? {
? ? ? var myform = document.getElementById("form1");
? ? ? var mail=/^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
? ? ? if(!mail.test(myform.email.value))
? ? ? { ?
? ? ? ? erremail.innerHTML = "<font color='red'>email不符合要求</font>";
? ? ? ? return false;
? ? ? }else{
? ? ? ? erremail.innerHTML = "<font color='green'>email符合要求</font>";
? ? ? ? return true;
? ? ? }
? ? }
? ? function checkform()
? ? {
? ? ? checkusername();checkage();checkemail();
? ? ? if(checkusername()&&checkage()&&checkemail())
? ? ? {
? ? ? ? return true; ?
? ? ? }else{
? ? ? ? return false;
? ? ? }
? ? }
? </script>
</head>
?
<body>
<!--
?<form id="form1" name="form1" method="post" action="ttt.jsp" onsubmit="return checkform()">
-->
?
?<form id="form1" name="form1" method="post" onsubmit="return checkform()">
<table width="777" border="0" cellpadding="1" cellspacing="1">
?<tr>
? <td colspan="3" ><div align="center">請輸入你的注冊信息</div></td>
?</tr>
?<tr>
? <td width="250" ><div align="right" >請輸入你的用戶名：</div></td>
? <td width="250"><div align="center">
? ? ?<input type="text" name="username" onblur="checkusername()" /> ?
? ?</div></td>
? <td><div id="errusername" align="center"></div></td>
?</tr>
?<tr>
? <td width="250"><div align="right">請輸入你的年齡：</div></td>
? <td width="250"><div align="center" >
? ?<label>
? ?<input type="text" name="age" onblur="checkage()"/>
? ?</label>
? </div></td>
? ?<td><div align="center" id="errage"></div></td>
?</tr>
?<tr>
? <td width="250"><div align="right" >請輸入你的EMAIL:</div></td>
? <td width="250"><div align="center" >
? ?<label>
? ?<input type="text" name="email" onblur="checkemail()" />
? ?</label>
? </div></td>
? ?<td><div align="center" id="erremail"></div></td>
?</tr>
?<tr>
? <td><div align="right">
? ?<label>
? ?<input type="submit" name="Submit" value="提交" />
? ?</label>
? </div></td>
? ?<td><div align="center">
? ? <label>
? ? <input type="reset" name="Submit2" value="重置" />
? ? </label>
? ?</div></td>
? <td><div align="center"></div></td>
?</tr>
</table>
?
</form>
?
</body>
</html>

保存文件名為：表單驗證的例1.html

用瀏覽器運行測試之，效果如下：