js进行表单验证实例分析

前端技术 2023/09/09 JavaScript

本文实例讲述了js进行表单验证的方法。分享给大家供大家参考。具体实现方法如下：

1. 传统的表单验证代码

复制代码 代码如下:
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> 
<html xmlns=\"http://www.w3.org/1999/xhtml\"> 
<head> 
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /> 
<title>表单验证</title> 
<script type=\"text/javascript\"> 
 
   function $(id) { 
       return document.getElementById(id); 
   } 
    
   function check() { 
       var email = $(\"email\").value; 
       var password = $(\"password\").value; 
       var repassword = $(\"repassword\").value; 
       var name = $(\"name\").value; 
        
       if(email == \"\") { 
           alert(\"Email值不能为空\"); 
           $(\"email\").focus(); 
           return false; 
       } 
        
       if(email.indexOf(\"@\") == -1 || email.indexOf(\".\") == -1) { 
           alert(\"邮箱格式不正确,必须包含@和.\"); 
           $(\"email\").focus(); 
           return false; 
       } 
        
       if(password == \"\") { 
           alert(\"密码不能为空\"); 
           $(\"password\").focus(); 
           return false; 
       } 
        
       if(password.length < 6) { 
           alert(\"密码长度必须大于或者等于6\"); 
           $(\"password\").focus(); 
           return false; 
       } 
        
       if(repassword != password) { 
           alert(\"两次输入的密码不一致\"); 
           $(\"repassword\").focus(); 
           return false; 
       } 
        
       if(name == \"\") { 
           alert(\"姓名不能为空\"); 
           $(\"name\").focus(); 
           return false; 
       } 
        
       for(var i = 0; i < name.length; i++) { 
           var j = name.subString(i , i+1); 
           if(isNaN(j) == false) { 
               alert(\'姓名中不能包含数字\'); 
               $(\"name\").focus(); 
               return false; 
           } 
       } 
   } 
</script> 
</head> 
<body> 
  <form name=\"login_form\" method=\"post\" onsubmit=\"return check()\"> 
      <div> 
           Email:<input type=\"text\" name=\"email\" id=\"email\"/> 
      </div>  
      <div> 
           密码:<input type=\"password\" name=\"password\" id=\"password\" /> 
      </div> 
      <div> 
          重输密码:<input type=\"password\" name=\"repassword\" id=\"repassword\" /> 
      </div> 
      <div> 
          姓名：<input type=\"text\" name=\"name\" id=\"name\" /> 
      </div> 
      <div> 
          <input type=\"submit\" value=\"注册\" /> 
      </div> 
  </form> 
</body> 
</html>

2. 输入框后面有提示信息的表单验证

复制代码 代码如下:
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> 
<html xmlns=\"http://www.w3.org/1999/xhtml\"> 
<head> 
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /> 
<title>表单验证</title> 
<script type=\"text/javascript\"> 
 
   function $(id) { 
       return document.getElementById(id); 
   } 
    
   function check() { 
       var email = $(\"email\").value; 
       var password = $(\"password\").value; 
       var repassword = $(\"repassword\").value; 
       var name = $(\"name\").value; 
          
       $(\"emailinfo\").innerHTML = \"\"; 
       $(\"passwordinfo\").innerHTML = \"\"; 
       $(\"repasswordinfo\").innerHTML = \"\"; 
       $(\"nameinfo\").innerHTML = \"\"; 
        
       if(email == \"\") { 
          $(\"emailinfo\").innerHTML = \"Email值不能为空\"; 
           $(\"email\").focus(); 
           return false; 
       } 
        
       if(email.indexOf(\"@\") == -1 || email.indexOf(\".\") == -1) { 
           $(\"emailinfo\").innerHTML = \"邮箱格式不正确,必须包含@和.\"; 
           $(\"email\").focus(); 
           return false; 
       } 
        
       if(password == \"\") { 
           $(\"passwordinfo\").innerHTML = \"密码不能为空\"; 
           $(\"password\").focus(); 
           return false; 
       } 
        
       if(password.length < 6) { 
           $(\"passwordinfo\").innerHTML = \"密码长度必须大于或者等于6\"; 
           $(\"password\").focus(); 
           return false; 
       } 
        
       if(repassword != password) { 
           $(\"repasswordinfo\").innerHTML = \"两次输入的密码不一致\"; 
           $(\"repassword\").focus(); 
           return false; 
       } 
        
       if(name == \"\") { 
          $(\"nameinfo\").innerHTML = \"姓名不能为空\"; 
           $(\"name\").focus(); 
           return false; 
       } 
        
       for(var i = 0; i < name.length; i++) { 
           var j = name.subString(i , i+1); 
           if(isNaN(j) == false) { 
               $(\"nameinfo\").innerHTML = \'姓名中不能包含数字\'; 
               $(\"name\").focus(); 
               return false; 
           } 
       } 
   } 
</script> 
</head> 
<body> 
  <form name=\"login_form\" method=\"post\" onsubmit=\"return check()\"> 
      <div> 
           Email:<input type=\"text\" name=\"email\" id=\"email\"/><span id=\"emailinfo\"></span> 
      </div>    
      <div> 
           密码:<input type=\"password\" name=\"password\" id=\"password\" /><span id=\"passwordinfo\"></span> 
      </div> 
      <div> 
          重输密码:<input type=\"password\" name=\"repassword\" id=\"repassword\" /><span id=\"repasswordinfo\"></span> 
      </div> 
      <div> 
          姓名：<input type=\"text\" name=\"name\" id=\"name\" /><span id=\"nameinfo\"></span> 
      </div> 
      <div> 
          <input type=\"submit\" value=\"注册\" /> 
      </div> 
  </form> 
</body> 
</html>

效果图如下所示：

3. 在输入框失去焦点时触发校验函数

复制代码 代码如下:
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> 
<html xmlns=\"http://www.w3.org/1999/xhtml\"> 
<head> 
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /> 
<title>表单验证</title> 
<script type=\"text/javascript\"> 
   function $(id) { 
       return document.getElementById(id); 
   } 
    
   function check() { 
       var email = $(\"email\").value; 
       var password = $(\"password\").value; 
       var repassword = $(\"repassword\").value; 
       var name = $(\"name\").value; 
          
       $(\"emailinfo\").innerHTML = \"\"; 
       $(\"passwordinfo\").innerHTML = \"\"; 
       $(\"repasswordinfo\").innerHTML = \"\"; 
       $(\"nameinfo\").innerHTML = \"\"; 
        
       if(email == \"\") { 
          $(\"emailinfo\").innerHTML = \"Email值不能为空\"; 
           return false; 
       } 
        
       if(email.indexOf(\"@\") == -1 || email.indexOf(\".\") == -1) { 
           $(\"emailinfo\").innerHTML = \"邮箱格式不正确,必须包含@和.\"; 
           return false; 
       } 
        
       if(password == \"\") { 
           $(\"passwordinfo\").innerHTML = \"密码不能为空\"; 
           return false; 
       } 
        
       if(password.length < 6) { 
           $(\"passwordinfo\").innerHTML = \"密码长度必须大于或者等于6\"; 
           return false; 
       } 
        
       if(repassword != password) { 
           $(\"repasswordinfo\").innerHTML = \"两次输入的密码不一致\"; 
           return false; 
       } 
        
       if(name == \"\") { 
          $(\"nameinfo\").innerHTML = \"姓名不能为空\"; 
           return false; 
       } 
        
       for(var i = 0; i < name.length; i++) { 
           var j = name.subString(i , i+1); 
           if(isNaN(j) == false) { 
               $(\"nameinfo\").innerHTML = \'姓名中不能包含数字\'; 
               return false; 
           } 
       } 
   } 
    
   function checkEmail() {  //校验Email 
       $(\'emailinfo\').innerHTML = \"\"; 
       var email = $(\'email\').value; 
       if(email == \"\") { 
            $(\'emailinfo\').innerHTML = \"Email值不能为空\"; 
            return false; 
       } 
        
       if(email.indexOf(\'@\') == -1 || email.indexOf(\'.\') == -1) { 
            $(\'emailinfo\').innerHTML = \"Email必须包含@和.\"; 
            return false; 
       } 
   } 
    
   function checkPassword() {  //校验密码 
      $(\'passwordinfo\').innerHTML = \"\"; 
      var password = $(\'password\').value; 
      if(password == \"\") { 
          $(\"passwordinfo\").innerHTML = \"密码不能为空\"; 
          return false; 
      } 
    
     if(password.length < 6) { 
         $(\"passwordinfo\").innerHTML = \"密码长度必须大于或者等于6\"; 
         return false; 
      } 
   } 
    
   function checkRepassword() { //校验重新输入的密码 
      $(\'repassword\').innerHTML = \"\"; 
      var repassword = $(\'repassword\').value; 
      if(repassword != password) { 
           $(\"repasswordinfo\").innerHTML = \"两次输入的密码不一致\"; 
           return false; 
       } 
   } 
    
   function checkName() {  //校验姓名 
       $(\'nameinfo\').innerHTML = \"\"; 
       var name = $(\'name\').value; 
       if(name == \"\") { 
          $(\"nameinfo\").innerHTML = \"姓名不能为空\"; 
           return false; 
       } 
        
       for(var i = 0; i < name.length; i++) { 
           var j = name.subString(i , i+1); 
           if(isNaN(j) == false) { 
               $(\"nameinfo\").innerHTML = \'姓名中不能包含数字\'; 
               return false; 
           } 
       } 
   } 
</script> 
</head> 
<body> 
  <form name=\"login_form\" method=\"post\" onsubmit=\"return check()\"> 
      <div> 
           Email:<input type=\"text\" name=\"email\" id=\"email\" onblur=\"checkEmail();\"/><span id=\"emailinfo\"></span> 
      </div>    
      <div> 
           密码:<input type=\"password\" name=\"password\" id=\"password\" onblur=\"checkPassword();\"/><span id=\"passwordinfo\"></span> 
      </div> 
      <div> 
          重输密码:<input type=\"password\" name=\"repassword\" id=\"repassword\" onblur=\"checkRepassword();\"/><span id=\"repasswordinfo\"></span> 
      </div> 
      <div> 
          姓名：<input type=\"text\" name=\"name\" id=\"name\" onblur=\"checkName();\"/><span id=\"nameinfo\"></span> 
      </div> 
      <div> 
          <input type=\"submit\" value=\"注册\" /> 
      </div> 
  </form> 
</body> 
</html>

效果图如下所示：

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/24418

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案