正则表达式表单验证

最新推荐文章于 2021-03-21 17:34:03 发布

sui_yz

最新推荐文章于 2021-03-21 17:34:03 发布

阅读量191

点赞数

本文链接：https://blog.csdn.net/sui_yz/article/details/78996766

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           body{width:400px;margin: 0 auto;}
           form input{margin: 10px 0px;}
           span{color: red;}
       </style>
       <script src="js/jquery-1.11.1.js"></script>
       <script>

           function login () {
               var reg_name=/^[a-z A-Z 0-9]{1,}$/;
               if (!reg_name.test($("#uname").val())) {
                   $("#t_uname").text("输入有误");
                   return false;
               }else{
                   $("#t_uname").text("");
               }

               var reg_pass=/^[A-Z][A-Z a-z 0-9]{1,}$/;
               if (!reg_pass.test($("#pass").val())) {
                   $("#t_pass").text("输入有误");
                   return false;
               }else{
                   $("#t_pass").text("");
               }

               var reg_sf=/^[0-9]{18,18}$/;
               if (!reg_sf.test($("#sf").val())) {
                   $("#t_sf").text("输入有误");
                   return false;
               }else{
                   $("#t_sf").text("");
               }

               var reg_tel=/^1[0-9]{10,10}$/;
               if (!reg_tel.test($("#tel").val())) {
                   $("#t_tel").text("输入有误");
                   return false;
               }else{
                   $("#t_tel").text("");
               }

               var reg_qq=/^[0-9]{5,}$/;
               if (!reg_qq.test($("#qq").val())) {
                   $("#t_qq").text("输入有误");
                   return false;
               }else{
                   $("#t_qq").text("");
               }

               var reg_mail=/@/;
               var reg_mail2=/.com$/;
               if (reg_mail.test($("#mail").val()) && reg_mail2.test($("#mail").val())) {
                   $("#t_mail").text("");
               }else{
                   $("#t_mail").text("输入有误");
                   return false;
               }
           }
       </script>
   </head>

   <body>
       <form action="http://www.baidu.com" οnsubmit="return login()">
           账　　号：<input type="text" id="uname" /><span id="t_uname"></span><br />
           密　　码：<input type="password" id="pass" /><span id="t_pass"></span><br />
           重复密码：<input type="password" id="tpass" /><span id="t_tpass"></span><br />
           昵　　称：<input type="text" id="tname" /><span id="t_tname"></span><br />
           出生日期：<input type="date" id="date" /><span id="t_date"></span><br />
           性别：<input type="radio" name="1" />汉子<input type="radio" name="1" />妹子<br />
           身份证号：<input type="text" id="sf" /><span id="t_sf"></span><br />
           手机号：<input type="text" id="tel" /><span id="t_tel"></span><br />
           Q　　Q：<input type="text" id="qq" /><span id="t_qq"></span><br />
           邮　　箱：<input type="text" id="mail" /><span id="t_mail"></span><br />
           <br />
           <input type="submit" value="注册" />　　　　　　　　　<input type="reset" value="清空" />
       </form>
   </body>
</html>