JavaScript如何實作表單驗證

這篇文章將分享關於JavaScript中表單驗證的應用，具有一定的參考作用，希望對大家有所幫助

在JavaScript中我們可以在資料被送到伺服器前對HTML 表單中的這些輸入資料進行驗證。客戶端表單驗證通常使用javascript完成，對於大多數使用者來說，JavaScript表單驗證將節省大量時間，但是如果使用者關閉了JavaScript，則仍需要仔細檢查伺服器上的資料。通常有JavaScript檢查的表單資料有：

（1）使用者是否已填入表單中的必填項目

（2）使用者輸入的郵件地址是否合法

（3）使用者是否已輸入正確格式的密碼

（4）使用者是否在資料域中輸入了文字

接下來將透過實際案例告訴大家JavaScript中表單驗證如何使用

html程式碼

<table style="width:350px;height:200px;margin: 100px auto;border:1px solid #ccc;">
 <tr>
    <td>
用户名：<input type="text" name="username" id="txt">
    </td>
   <td id="sure"></td> 
</tr>
 <tr>
     <td>
密码 ：<input type="password" name="password" id="mima">
      </td>
      <td id="sure1"></td>
</tr>
</table>

驗證使用者名稱和密碼的輸入是否出錯

<script type="text/javascript">
		var txt=document.getElementById("txt");
		var sure=document.getElementById("sure");
		var mima=document.getElementById("mima");
		var sure1=document.getElementById("sure1");
		txt.onblur=function(){ 

if(this.value=="")
{
	sure.style.display="block";
	sure.style.color="red";
	sure.innerHTML="输入内容不能为空";
}
else if((txt.value.length<3)||(txt.value.length>8)){
    sure.style.display="block";
    sure.style.color="red";
	sure.innerHTML="您输入的用户名是错误的长度";	
}

else{
	sure.style.display="block";
	sure.style.color="#444"
	sure.innerHTML="输入正确";
}

		}


mima.onblur=function(){ 

if(this.value=="")
{
	sure1.style.display="block";
	sure1.style.color="red";
	sure1.innerHTML="输入内容不能为空";
}
else if((txt.value.length<3)||(txt.value.length>8)){
    sure1.style.display="block";
    sure1.style.color="red";
	sure1.innerHTML="您输入的密码是错误的长度";	
}
else if(isNaN(this.value)){
	sure1.style.display="block";
    sure1.style.color="red";
	sure1.innerHTML="请输入数字";
		}

else{
	sure1.style.display="block";
	sure1.style.color="#444"
	sure1.innerHTML="输入正确";
}

		}

輸入內容為錯誤時

#總結：以上就是本篇文章的全部內容了，希望對大家學習表單驗證有所幫助。

以上是JavaScript如何實作表單驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！