JavaScript表单验证示例

淡淡的烟草味﹌ 2022-09-13 14:23 170阅读 0赞

### 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" 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

用浏览器运行测试之，效果如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_17_color_FFFFFF_t_70_g_se_x_16][]

**例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" 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

用浏览器运行测试之，效果如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_16_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/78d67d255fc04fa1b3d96879f38774e9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/58c72609559b43cd98762b566a2ac221.png