快捷導(dǎo)航

JavaScript表單驗(yàn)證示例詳解

更新時(shí)間：2021年10月04日 10:38:57 作者：軟件開(kāi)發(fā)技術(shù)學(xué)習(xí)實(shí)踐愛(ài)好者

這篇文章主要為大家詳細(xì)介紹了JavaScript表單驗(yàn)證示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

HTML表單（form）通常用于收集用戶(hù)信息，例如姓名，電子郵件地址，位置，年齡等。

但是很可能某些用戶(hù)可能不會(huì)輸入您期望的數(shù)據(jù)。HTML表單驗(yàn)證可以通過(guò)JavaScript完成。

為了避免對(duì)服務(wù)器資源造成不必要的壓力，您可以使用JavaScript在客戶(hù)端（用戶(hù)系統(tǒng)）上驗(yàn)證表單數(shù)據(jù)，不正確的信息是不會(huì)提交給后臺(tái)服務(wù)器的——這是所謂客戶(hù)端驗(yàn)證。本文將介紹這種驗(yàn)證

表單驗(yàn)證一般分為兩種方式。

客戶(hù)端驗(yàn)證：直接在客戶(hù)端執(zhí)行JS進(jìn)行驗(yàn)證，驗(yàn)證的過(guò)程中和服務(wù)器端沒(méi)有任何的交互

服務(wù)器端驗(yàn)證：頁(yè)面將驗(yàn)證信息傳回服務(wù)器端，服務(wù)器端進(jìn)行驗(yàn)證，并將驗(yàn)證的結(jié)果發(fā)送回客戶(hù)端

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

例1、一個(gè)簡(jiǎn)單示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單驗(yàn)證簡(jiǎn)單示例</title>
</head>
<head>
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
  //alert("姓名必須填寫(xiě)");
  usernameerror.innerHTML="<font color='red'>姓名必須填寫(xiě)</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>

保存文件名為：表單驗(yàn)證的例1.html

用瀏覽器運(yùn)行測(cè)試之，效果如下：

例2、一個(gè)復(fù)雜點(diǎn)的示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>表單驗(yàn)證示例注冊(cè)用戶(hù)</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'>用戶(hù)名不符合要求</font>";
        return false;
      }else{
        errusername.innerHTML = "<font color='green'>用戶(hù)名符合要求</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">請(qǐng)輸入你的注冊(cè)信息</div></td>
 </tr>
 <tr>
  <td width="250" ><div align="right" >請(qǐng)輸入你的用戶(hù)名：</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">請(qǐng)輸入你的年齡：</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" >請(qǐng)輸入你的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>

保存文件名為：表單驗(yàn)證的例1.html

用瀏覽器運(yùn)行測(cè)試之，效果如下：