javascript实现表单验证

前端技术 2023/09/02 JavaScript

本文实例讲解了javascript实现表单验证的详细代码，分享给大家供大家参考，具体内容如下

效果图：

具体代码：

<html>
<head> 
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /> 
<title>无标题文档</title> 
</head> 
  <script type=\"text/javascript\"> 
  function check() 
  { 
     
    //真实姓名(不能为空，其它没有要求)   
    var name = document.getElementById(\"name\").value; 
    if(name==\"\"||name==null) 
    { 
      alert(\"不能为空!\"); 
      return false; 
    } 
     
    //登录名(登录名不能为空，长度在5-8之间，可以包含中文字符（）)一个汉字算一个字符 
    var loginName = document.getElementById(\"loginName\").value; 
    if(loginName==\"\"||loginName==null) 
    { 
      alert(\"登录名不能为空\"); 
      return false; 
    } 
    //\\u4e00-\\u9fa5 验证中文字符 
    var reg=/^[A-Za-z0-8\\u4e00-\\u9fa5]{5,8}$/; 
    var result = reg.test(loginName); 
    if(!result) 
    { 
      alert(\"登录名长度在5-8之间!\"); 
      return false; 
    } 
     
    //密码(不能为空，长度6-12字符或数字，不能包含中文字符)  
    var pwd = document.getElementById(\"pwd\").value; 
    if(pwd==\"\"||pwd==null) 
    { 
      alert(\"密码不能为空!\"); 
      return false; 
    } 
    var regpwd = /^[A-Za-z0-9]{6,12}$/; 
    if(!regpwd.test(pwd)) 
    { 
      alert(\"密码长度在6-12之间\"); 
      return false; 
    } 
     
    //确认密码(不能为空，长度6-12字符或数字，不能包含中文字符，与密码一致) 
    var repwd = document.getElementById(\"repwd\").value; 
    if(repwd==\"\"||repwd==null) 
    { 
      alert(\"确认密码不能为空!\"); 
      return false; 
    } 
    if(repwd!=pwd) 
    { 
      alert(\"确认密码与密码不一致\"); 
      return false; 
    } 
     
    //身份证(15或18位) 
    var idcard = document.getElementById(\"idcard\").value; 
    if(idcard==\"\"||idcard==null) 
    { 
      alert(\"身份证不能空!\"); 
      return false; 
    } 
    if((idcard.length!=15)&&(idcard.length!=18)) 
    { 
      alert(\"身份证必选为15或18位\"); 
      return false; 
    } 
    if(idcard.length==15) 
    { 
      var regIDCard=/^\\d{15}$/; 
      if(!regIDCard.test(idcard)) 
       { 
         alert(\"身份证输入错误\"); 
         return false; 
       } 
    } 
    if(idcard.length==18) 
    { 
      var regIDCard =/^\\d{18}|\\d{17}[x|X]{1}$/; 
      if(!regIDCard.test(idcard)) 
       { 
         alert(\"身份证输入错误\"); 
         return false; 
       } 
    } 
  } 
</script>   
<body> 
<h3>javascript验证</h3> 
<table width=\"854\" border=\"1\"> 
 <tr> 
  <td width=\"633\">真实姓名(不能为空，其它没有要求)</td> 
  <td width=\"205\"><input id=\"name\" name=\"name\" type=\"text\"/></td> 
 </tr> 
 <tr> 
  <td>登录名(登录名不能为空，长度在5-8之间，可以包含中文字符（）)一个汉字算一个字符</td> 
  <td><input id=\"loginName\" name=\"loginName\" type=\"text\"/></td> 
 </tr> 
 <tr> 
  <td>密码(不能为空，长度6-12字符或数字，不能包含中文字符)</td> 
  <td><input id=\"pwd\" name=\"pwd\" type=\"password\"/></td> 
 </tr> 
 <tr> 
  <td>确认密码(不能为空，长度6-12字符或数字，不能包含中文字符，与密码一致)</td> 
  <td><input id=\"repwd\" name=\"repwd\" type=\"password\"/></td> 
 </tr> 
 <tr> 
  <td>性别(必选其一)</td> 
  <td><input id=\"sex\" name=\"sex\" type=\"radio\" value=\"男\" checked=\"checked\"/>男  
    <input id=\"sex\" name=\"sex\" type=\"radio\" value=\"女\" />女 
  </td> 
 </tr> 
 <tr> 
  <td>身份证(15或18位)</td> 
  <td><input type=\"text\" id=\"idcard\" name=\"idcard\"/></td> 
 </tr> 
 <tr> 
  <td colspan=\"2\" align=\"center\"><input type=\"button\" id=\"check\" value=\"提交\" onclick=\"check()\"/></td> 
 </tr> 
</table> 
</body> 
 
</html>

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

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

转载请注明出处。

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

我的博客

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

我的标签

随笔档案