當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript表单验证示例
生活随笔
收集整理的這篇文章主要介紹了
JavaScript表单验证示例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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
用瀏覽器運行測試之，效果如下：
總結
以上是生活随笔為你收集整理的JavaScript表单验证示例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python实现比较两个列表(list)
- 下一篇： html表单电子邮件验证验证,详解Jav