JavaScript表單驗證示例詳解
HTML表單(form)通常用於收集用戶信息,例如姓名,電子郵件地址,位置,年齡等。
但是很可能某些用戶可能不會輸入您期望的數據。HTML表單驗證可以通過JavaScript完成。
為瞭避免對服務器資源造成不必要的壓力,您可以使用JavaScript在客戶端(用戶系統)上驗證表單數據,不正確的信息是不會提交給後臺服務器的——這是所謂客戶端驗證。本文將介紹這種驗證
表單驗證一般分為兩種方式。
客戶端驗證:直接在客戶端執行JS進行驗證,驗證的過程中和服務器端沒有任何的交互
服務器端驗證:頁面將驗證信息傳回服務器端,服務器端進行驗證,並將驗證的結果發送回客戶端
這兩個驗證都是必須的,因為客戶端的驗證安全性不是太高,但是可以防止80%以上的用戶的誤操作,可以減輕服務器端的壓力,而且速度非常快,用戶體驗高。不要以為有瞭客戶端的驗證就不需要瞭服務器端的瞭,客戶端的驗證是很容易繞過去的,服務器端驗證安全性比較高,所以一般驗證兩個驗證都需要寫。】
例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、一個復雜點的示例
<!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
用瀏覽器運行測試之,效果如下:
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。