Home > Article > Web Front-end > Javascript implements form verification_javascript skills

Javascript implements form verification_javascript skills

WBOYOriginal: 2016-05-16 15:16:581350browse

The example in this article explains the detailed code of javascript to implement form verification, and shares it with everyone for your reference. The specific content is as follows

Rendering:

Specific code:

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

I hope this article will be helpful to everyone in learning javascript programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of javascript to implement waterfall flow absolute layout_javascript skillsNext article：Detailed explanation of javascript to implement waterfall flow absolute layout_javascript skills

See more

Javascript implements form verification_javascript skills

Related articles