当前位置：Gxlcms > html代码 > 在HTML中如何用正则表达式检验表格

在HTML中如何用正则表达式检验表格

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

这篇文章主要介绍了HTML用正则表达式检验表格的实例代码，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下

下面给大家分享HTML用正则表达式检验表格的实例代码，具体代码内容如下所示：


  1. <span style="font-size:24px;color:#cc6600;"> 正则表达式在JavaScript脚本中是很好用的检验语法规则的方法。但是与Java中的正则表达式有所不同。它需要在regex规则上以“^”开始，以"$"结束。</span>


  1. <span style="font-size:24px;color:#cc6600;">以下让我们看看一个实例。</span>


  1. <span style="font-size:18px;"><!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <style>  
  7.         form table tr td{  
  8.             border: 1px solid lightgrey;  
  9.             text-align: center;  
  10.         }  
  11.         form table tr td input{  
  12.             width: 97%;  
  13.         }  
  14.     </style>  
  15.     <script language="JavaScript" type="text/javascript">  
  16.         //判断规则（正则表达式）  
  17.     function goto() {  
  18.      var name = document.getElementById("name");  
  19.      var pwd = document.getElementById("pwd");  
  20.      var pwd2 = document.getElementById("pwd2");  
  21.      var pnum = document.getElementById("pnum");  
  22.      var phone = document.getElementById("phone");  
  23.      var telephone = document.getElementById("telephone");  
  24.      var email = document.getElementById("email");  
  25.         if (name.value.trim().length<=8){  
  26.             alert("用户名长度必须大于八位");  
  27.             name.focus()  
  28.             name.value="";  
  29.             return;  
  30.         }  
  31. //        规则必须包括大小写字母，数字  
  32.         var regex = /^(?!(?:\d+|[a-zA-Z]+|[\da-z]+|[\dA-Z])$)[\da-zA-Z]{6,}$/;  
  33. //        var regex = /^[A-z0-9]{10,20}$/;  
  34.         if ( !pwd.value.match(regex)){  
  35.             alert("密码不符合规定");  
  36.             pwd.focus()  
  37.             pwd.value="";  
  38.             return;  
  39.         }  
  40.         if (pwd.value != pwd2.value){  
  41.             alert("两次输入的密码不相同");  
  42.             pwd2.focus()  
  43.             pwd.value="";  
  44.             pwd2.value="";  
  45.             return;  
  46.         }  
  47.         var rege=/^\d{17}X$|^\d{15}$/;  
  48.         if (!rege.test(pnum.value)){  
  49.             alert("身份证不符合规定");  
  50.             pnum.focus()  
  51.             pnum.value="";  
  52.             return;  
  53.         }  
  54.         var regex2 = /^\d{4}-\d{7}$/;//判断座机号  
  55.         if (!regex2.test(phone.value)){  
  56.             alert("座机号码不符合规定");  
  57.             phone.focus()  
  58.             phone.value="";  
  59.             return;  
  60.         }  
  61.         var regex3 = /^1[3,5,7,8]\d{9}$/;  
  62.         if (!regex3.test(telephone.value)){  
  63.             alert("手机号码不符合规定");  
  64.             telephone.focus()  
  65.             telephone.value="";  
  66.             return;  
  67.         }  
  68.         //test方法必须用反斜杠转义  
  69.         var regex4 = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;  
  70.         if (!regex4.test(email.value)){  
  71.             alert("邮箱不符合规定");  
  72.             email.focus()  
  73.             email.value="";  
  74.             return;  
  75.         }  
  76.     }  
  77.     </script>  
  78. </head>  
  79. <body>  
  80. <form>  
  81.     <table style="width:600px;height: 300px;border: 1px solid lightgrey">  
  82.         <tr>  
  83.             <td width="18%">登录名:</td>  
  84.             <td><input id="name"type="text"></td>  
  85.             <td width="50%">长度大于八位</td>  
  86.         </tr>  
  87.         <tr>  
  88.             <td>登录密码:</td>  
  89.             <td><input   id="pwd"type="password"></td>  
  90.             <td>长度大于十位，包含字母数字</td>  
  91.         </textarea></td>  
  92.         </tr>  
  93.         <tr>  
  94.             <td>确认密码:</td>  
  95.             <td><input id="pwd2" type="password"></td>  
  96.         </tr>  
  97.         <tr>  
  98.             <td>身份证号码:</td>  
  99.             <td><input  id="pnum" type="text"></td>  
  100.             <td>15位或18位最后一个是X</td>  
  101.         </tr>  
  102.         <tr>  
  103.             <td>固定电话:</td>  
  104.             <td><input   id="phone"type="text"></td>  
  105.             <td>格式xxxx-xxxxxxx</td>  
  106.         </tr>  
  107.         <tr>  
  108.             <td>手机号码:</td>  
  109.             <td><input   id="telephone"type="text"></td>  
  110.             <td>11位整数</td>  
  111.         </tr>  
  112.         <tr>  
  113.             <td>电子邮件:</td>  
  114.             <td><input   id="email"type="text"></td>  
  115.             <td>xxxx@xxx.xxx  xxx@xxx.xxx.xx</td>  
  116.         </tr>  
  117.         <tr>  
  118.             <td>现居住地:</td>  
  119.             <td><select>  
  120.                 <option>--选择省份--</option>  
  121.                 <option>北京</option>  
  122.                 <option>河北</option>  
  123.                 <option>广西</option>  
  124.             </select></td>  
  125.             <td><select>  
  126.                 <option>--选择城市--</option>  
  127.                 <option>烟台</option>  
  128.                 <option>青岛</option>  
  129.                 <option>哈尔滨</option>  
  130.             </select></td>  
  131.         </tr>  
  132.         <tr>  
  133.             <td colspan="1"></td>  
  134.             <td><input id="submit" type="button" value="提交注册信息" style="width: 100px" onclick="goto()"></td>  
  135.             <td><input type="reset" value="重置" style="width: 60px"></td>  
  136.         </tr>  
  137.     </table>  
  138. </form>  
  139. </body>  
  140. </html></span>

附:一些常使用的规则：

"^\\d+$"　　//非负整数（正整数 + 0）

"^[0-9]*[1-9][0-9]*$"　　//正整数

"^((-\\d+)|(0+))$"　　//非正整数（负整数 + 0）

"^-[0-9]*[1-9][0-9]*$"　　//负整数

"^-?\\d+$"　　　　//整数

"^\\d+(\\.\\d+)?$"　　//非负浮点数（正浮点数 + 0）

"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"　　//正浮点数

"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"　　//非正浮点数（负浮点数 + 0）

"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"　　//负浮点数

"^(-?\\d+)(\\.\\d+)?$"　　//浮点数

"^[A-Za-z]+$"　　//由26个英文字母组成的字符串

"^[A-Z]+$"　　//由26个英文字母的大写组成的字符串

"^[a-z]+$"　　//由26个英文字母的小写组成的字符串

"^[A-Za-z0-9]+$"　　//由数字和26个英文字母组成的字符串

"^\\w+$"　　//由数字、26个英文字母或者下划线组成的字符串

"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"　　　　//email地址

"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$"　　//url

以上所述是小编给大家介绍的HTML用正则表达式检验表格的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

以上就是在HTML中如何用正则表达式检验表格的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

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