Javascript implémente les compétences de vérification de formulaire

Maison

interface Web

js tutoriel

Javascript implémente les compétences de vérification de formulaire_javascript

May 16, 2016 pm 03:16 PM

javascript 表单验证

L'exemple de cet article explique le code détaillé de javascript pour implémenter la vérification de formulaire et le partage avec vous pour votre référence. Le contenu spécifique est le suivant

Rendu :

Code spécifique :

&lt;html&gt;
&lt;head&gt; 
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; 
&lt;title&gt;无标题文档&lt;/title&gt; 
&lt;/head&gt; 
  &lt;script type="text/javascript"&gt; 
  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; 
       } 
    } 
  } 
&lt;/script&gt;   
&lt;body&gt; 
&lt;h3&gt;javascript验证&lt;/h3&gt; 
&lt;table width="854" border="1"&gt; 
 &lt;tr&gt; 
  &lt;td width="633"&gt;真实姓名(不能为空，其它没有要求)&lt;/td&gt; 
  &lt;td width="205"&gt;&lt;input id="name" name="name" type="text"/&gt;&lt;/td&gt; 
 &lt;/tr&gt; 
 &lt;tr&gt; 
  &lt;td&gt;登录名(登录名不能为空，长度在5-8之间，可以包含中文字符（）)一个汉字算一个字符&lt;/td&gt; 
  &lt;td&gt;&lt;input id="loginName" name="loginName" type="text"/&gt;&lt;/td&gt; 
 &lt;/tr&gt; 
 &lt;tr&gt; 
  &lt;td&gt;密码(不能为空，长度6-12字符或数字，不能包含中文字符)&lt;/td&gt; 
  &lt;td&gt;&lt;input id="pwd" name="pwd" type="password"/&gt;&lt;/td&gt; 
 &lt;/tr&gt; 
 &lt;tr&gt; 
  &lt;td&gt;确认密码(不能为空，长度6-12字符或数字，不能包含中文字符，与密码一致)&lt;/td&gt; 
  &lt;td&gt;&lt;input id="repwd" name="repwd" type="password"/&gt;&lt;/td&gt; 
 &lt;/tr&gt; 
 &lt;tr&gt; 
  &lt;td&gt;性别(必选其一)&lt;/td&gt; 
  &lt;td&gt;&lt;input id="sex" name="sex" type="radio" value="男" checked="checked"/&gt;男  
    &lt;input id="sex" name="sex" type="radio" value="女" /&gt;女 
  &lt;/td&gt; 
 &lt;/tr&gt; 
 &lt;tr&gt; 
  &lt;td&gt;身份证(15或18位)&lt;/td&gt; 
  &lt;td&gt;&lt;input type="text" id="idcard" name="idcard"/&gt;&lt;/td&gt; 
 &lt;/tr&gt; 
 &lt;tr&gt; 
  &lt;td colspan="2" align="center"&gt;&lt;input type="button" id="check" value="提交" onclick="check()"/&gt;&lt;/td&gt; 
 &lt;/tr&gt; 
&lt;/table&gt; 
&lt;/body&gt; 
 
&lt;/html&gt;

Copier après la connexion

J'espère que cet article sera utile à tous ceux qui apprennent la programmation JavaScript.

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn