当前位置：Gxlcms > 正则表达式 > 详解正则表达式表单验证实例

详解正则表达式表单验证实例

时间：2021-07-01 10:21:17 帮助过：19人阅读

先看看效果图：

首先给大家解释一些符号相关的意义

* 匹配前面的子表达式零次或多次；
^ 匹配输入字符串的开始位置；$匹配输入字符串的结束位置
1. /^$/ 这个是个通用的格式。
2. 里面输入需要实现的功能。
\d 匹配一个数字字符，等价于[0-9]
+ 匹配前面的子表达式一次或多次；
？匹配前面的子表达式零次或一次；
下面通过一段代码给大家分析表单验证正则表达式，具体代码如下：

  1. <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.  <meta charset="UTF-">
  5.  <title>正则验证常用表单方法</title>
  6.  <script type="text/javascript">
  7.  function focus_username() {
  8.   var resultObj=document.getElementById('result_username');
  9.   resultObj.innerHTML="以字母开头的-位的字符";
  10.   resultObj.style.color="blue";
  11.   document.form.username.style="border:px solid red";
  12.  } 
  13.  // function blur_username () {
  14.  //第一种方法：
  15.  // var resultObj=document.getElementById('result_username') 
  16.  // if (document.form.username.value=='') {
  17.  // resultObj.innerHTML="用户名不能为空";
  18.  // resultObj.style.color="red";
  19.  // return false;
  20.  // }else if (document.form.username.value.length<||document.form.username.value.length>) {
  21.  // resultObj.innerHTML="用户名字符长度必须介于到个之间";
  22.  // resultObj.style.color="red";
  23.  // return false;
  24.  // }else{
  25.  // resultObj.innerHTML="ok";
  26.  // resultObj.style.color="green";
  27.  // }
  28.  // }
  29.  function blur_username () {
  30.   //第二种方法：
  31.   var resultObj=document.getElementById('result_username') 
  32.   var pre=document.form.username.value;
  33.   var reg=/^[a-zA-Z]\w{,}$/;
  34.   if (pre=='') {
  35.   resultObj.innerHTML="(必填项)用户名不能为空";
  36.   resultObj.style.color="red";
  37.   return false;
  38.   }else if (!reg.test(pre)) {
  39.   resultObj.innerHTML="用户名字符输入不合法";
  40.   resultObj.style.color="red";
  41.   return false;
  42.   }else{
  43.   resultObj.innerHTML="ok";
  44.   resultObj.style.color="green";
  45.   return true;
  46.   }
  47.  }
  48.  function focus_userpwd() {
  49.  var resultObj=document.getElementById('result_userpwd');
  50.  resultObj.innerHTML="(必填项)介于-位的非特殊字符";
  51.  resultObj.style.color="blue";
  52.  document.form.userpwd.style="border:px solid red";
  53.  } 
  54.  // function blur_userpwd () {
  55.  // var resultObj=document.getElementById('result_userpwd') 
  56.  // if (document.form.userpwd.value=='') {
  57.  // resultObj.innerHTML="用户名密码不能为空";
  58.  // resultObj.style.color="red";
  59.  // return false;
  60.  // }else if (document.form.userpwd.value.length<||document.form.userpwd.value.length>) {
  61.  // resultObj.innerHTML="用户名密码字符长度必须介于到个之间";
  62.  // resultObj.style.color="red";
  63.  // return false;
  64.  // }else{
  65.  // resultObj.innerHTML="ok";
  66.  // resultObj.style.color="green";
  67.  // return true;
  68.  // }
  69.  // }
  70.  function blur_userpwd () { 
  71.  var resultObj=document.getElementById('result_userpwd') 
  72.   var pre=document.form.userpwd.value;
  73.   var reg=/^\w{,}$/;
  74.  if (pre=='') {
  75.   resultObj.innerHTML="(必填项)用户名密码不能为空";
  76.   resultObj.style.color="red";
  77.   return false;
  78.   }else if (!reg.test(pre)) {
  79.   resultObj.innerHTML="用户名密码字符输入不合法";
  80.   resultObj.style.color="red";
  81.   return false;
  82.   }else{
  83.   resultObj.innerHTML="ok";
  84.   resultObj.style.color="green";
  85.   return true;
  86.   }
  87.  }
  88.  function focus_userpwd() {
  89.  var resultObj=document.getElementById('result_userpwd');
  90.  resultObj.innerHTML="(必填项)介于-位的非特殊字符";
  91.  resultObj.style.color="blue";
  92.  document.form.userpwd.style="border:px solid red";
  93.  } 
  94.  // function blur_userpwd () {
  95.  // var resultObj=document.getElementById('result_userpwd') 
  96.  // if (document.form.userpwd.value=='') {
  97.  // resultObj.innerHTML="用户名密码不能为空";
  98.  // resultObj.style.color="red";
  99.  // return false;
  100.  // }else if (document.form.userpwd.value!=document.form.userpwd.value) {
  101.  // resultObj.innerHTML="两次用户名密码输入不一致";
  102.  // resultObj.style.color="red";
  103.  // return false;
  104.  // }else{
  105.  // resultObj.innerHTML="ok";
  106.  // resultObj.style.color="green";
  107.  // return true;
  108.  // }
  109.  // } 
  110.  function blur_userpwd () {
  111.   var resultObj=document.getElementById('result_userpwd') 
  112.   var pre=document.form.userpwd.value;
  113.   var reg=/^\w{,}$/;
  114.   if (pre=='') {
  115.   resultObj.innerHTML="(必填项)用户名密码不能为空";
  116.   resultObj.style.color="red";
  117.   return false;
  118.   }else if (!reg.test(pre)) {
  119.   resultObj.innerHTML="用户名密码字符输入不合法";
  120.   resultObj.style.color="red";
  121.   return false;
  122.   }else if(document.form.userpwd.value!=document.form.userpwd.value){
  123.   resultObj.innerHTML="两次用户名密码输入不一致";
  124.   resultObj.style.color="red";
  125.   return false;
  126.   }else {resultObj.innerHTML="ok";
  127.   resultObj.style.color="green";
  128.   return true;
  129.   }  
  130.  }
  131.  function focus_Mobile() {
  132.   var resultObj=document.getElementById('result_Mobile');
  133.   resultObj.innerHTML="请输入你位数的手机号码";
  134.   resultObj.style.color="blue";
  135.   document.form.Mobile.style="border:px solid red";
  136.  } 
  137.  function blur_Mobile() { 
  138.   var resultObj=document.getElementById('result_Mobile') 
  139.   var pre=document.form.Mobile.value;
  140.   var reg=/^[||][-]{}$/;
  141.   if (pre=='') {
  142.   resultObj.innerHTML="手机号码不能为空";
  143.   resultObj.style.color="red";  
  144.   }else if (!reg.test(pre)) {
  145.   resultObj.innerHTML="手机号码字符输入不合法";
  146.   resultObj.style.color="red";  
  147.   }else {
  148.   resultObj.innerHTML="ok";
  149.   resultObj.style.color="green";  
  150.   }  
  151.  }
  152.  function focus_Tel() {
  153.   var resultObj=document.getElementById('result_Tel');
  154.   resultObj.innerHTML="请输入你的座机号码";
  155.   resultObj.style.color="blue";
  156.   document.form.Tel.style="border:px solid red";
  157.  } 
  158.  function blur_Tel() { 
  159.   var resultObj=document.getElementById('result_Tel') 
  160.   var pre=document.form.Tel.value;
  161.   var reg=/^{}[-]{,}\-[]?[-]{}$/;
  162.   if (pre=='') {
  163.   resultObj.innerHTML="座机号码不能为空";
  164.   resultObj.style.color="red";
  165.   }else if (!reg.test(pre)) {
  166.   resultObj.innerHTML="座机号码字符输入不合法";
  167.   resultObj.style.color="red";
  168.   }else {
  169.   resultObj.innerHTML="ok";
  170.   resultObj.style.color="green";  
  171.   }  
  172.  }
  173.  function focus_mail() {
  174.   var resultObj=document.getElementById('result_mail');
  175.   resultObj.innerHTML="请输入你的邮箱号码";
  176.   resultObj.style.color="blue";
  177.   document.form.mail.style="border:px solid red";
  178.  } 
  179.  function blur_mail() { 
  180.   var resultObj=document.getElementById('result_mail');
  181.   var pre=document.form.mail.value;
  182.   var reg=/^[a-zA-Z-][a-zA-Z-\._]+@[a-z-]+\.(com)(\.(cn))?$/;
  183.   if (pre=='') {
  184.   resultObj.innerHTML="邮箱号码不能为空";
  185.   resultObj.style.color="red";
  186.   }else if (!reg.test(pre)) {
  187.   resultObj.innerHTML="邮箱号码字符输入不合法";
  188.   resultObj.style.color="red";
  189.   }else {
  190.   resultObj.innerHTML="ok";
  191.   resultObj.style.color="green";
  192.   }  
  193.  }
  194.  function focus_ID() {
  195.   var resultObj=document.getElementById('result_ID');
  196.   resultObj.innerHTML="(必填项)请输入你位的二代身份证号码";
  197.   resultObj.style.color="blue";
  198.   document.form.ID.style="border:px solid red";
  199.  } 
  200.  function blur_ID() { 
  201.   var resultObj=document.getElementById('result_ID');
  202.   var pre=document.form.ID.value;
  203.   var reg=/^[-]{}[-x]$/;
  204.   if (pre=='') {
  205.   resultObj.innerHTML="(必填项)二代身份证号码字符不能为空";
  206.   resultObj.style.color="red";
  207.   return false;
  208.   }else if (!reg.test(pre)) {
  209.   resultObj.innerHTML="二代身份证号码字符输入不合法";
  210.   resultObj.style.color="red";
  211.   return false;
  212.   }else {
  213.   resultObj.innerHTML="ok";
  214.   resultObj.style.color="green";
  215.   return true;
  216.   }  
  217.  }
  218.  function checkForm(){
  219.   var flag_username=blur_username();
  220.   var flag_userpwd=blur_userpwd();
  221.   var flag_userpwd=blur_userpwd();
  222.   var flag_ID=blur_ID();  
  223.   if (flag_username==true&&flag_userpwd==true&&flag_userpwd==true&&flag_ID==true) {  
  224.   return true;
  225.   }else{
  226.   return false;
  227.   } 
  228.  }
  229.  </script>
  230.  <style type="text/css">
  231.  body{background-image: url(images/.jpg);background-size: cover;}
  232.  table{margin-left: px;margin-top: px;background-image: url(images/.jpg);background-size: cover;box-shadow: px px px #C}
  233.  .vip{font-size: px;}
  234.  </style>
  235.  </head>
  236.  <body>
  237.  <form name="form" action=".php" method="post" onsubmit="return checkForm()">
  238.  <table width="px" border="px" bordercolor="red" cellpadding="px" cellspacing="px" align="center" >
  239.  <tr>
  240.   <th colspan="" class="vip">VIP会员注册</th>
  241.  </tr>
  242.  <tr>
  243.   <td width="px" align="right" >用户名：</td>
  244.   <td width="px"><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()" ></td>
  245.   <td><div width="px" id="result_username"></div></td>
  246.  </tr>
  247.  <tr>
  248.   <td align="right">密码：</td>
  249.   <td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()" /></td>
  250.   <td><div id="result_userpwd"></div></td>
  251.  </tr>
  252.  <tr>
  253.   <td align="right">确认密码：</td>
  254.   <td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()"/></td>
  255.   <td><div id="result_userpwd"></div></td>
  256.  </tr>
  257.  <tr>
  258.   <td align="right">手机号码：</td>
  259.   <td><input type="text" name="Mobile" onfocus="focus_Mobile()" onblur="blur_Mobile()"/></td>
  260.   <td><div id="result_Mobile"></div></td>
  261.  </tr>
  262.  <tr>
  263.   <td align="right">座机号码：</td>
  264.   <td><input type="text" name="Tel" onfocus="focus_Tel()" onblur="blur_Tel()"/></td>
  265.   <td><div id="result_Tel"></div></td>
  266.  </tr>
  267.  <tr>
  268.   <td align="right">邮箱号码：</td>
  269.   <td><input type="text" name="mail" onfocus="focus_mail()" onblur="blur_mail()"/></td>
  270.   <td><div id="result_mail"></div></td>
  271.  </tr>
  272.  <tr>
  273.   <td align="right">二代身份证：</td>
  274.   <td><input type="text" name="ID" onfocus="focus_ID()" onblur="blur_ID()"/></td>
  275.   <td><div id="result_ID"></div></td>
  276.  </tr>
  277.  <tr>
  278.   <td align="center" colspan=""><input type="submit" value="提交注册" />
  279.   <input type="reset" value="重置资料" /></td>
  280.   <td></td>
  281.  </tr>
  282.  </table>
  283.  </form> 
  284.  </body>
  285.  </html>

以上内容就是表单验证正则表达式实例代码，希望对大家有帮助。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！