js正则表达式处理表单

最新推荐文章于 2025-03-23 14:39:27 发布

weixin_30788731

最新推荐文章于 2025-03-23 14:39:27 发布

阅读量67

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/AGoodDay/p/10808604.html

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <!--<meta name="viewport"-->
  6           <!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9     <link rel="stylesheet" href="css/reset.css">
 10     <link rel="stylesheet" href="css/register.css">
 11 
 12     <script src="lib/jquery/jquery-1.12.4.js"></script>
 13     <script type="text/javascript">
 14         //验证用户名
 15         function user(){
 16             //获取所填的信息值
 17             var name = document.getElementById("txtname").value;
 18             var reg = /^[a-zA-Z0-9\u4E00-\u9FA5]{2,6}$/;//定义约束，要求输入英文，数字，下划线，中文
 19             if(!reg.test(name)){
 20                 span_name.innerHTML = "请输入英文,数字,下划线,中文";
 21             }else{
 22                 span_name.innerHTML="格式正确";//验证通过后提示
 23             }
 24         }
 25         
 26         function passWord(){
 27             var pwd = document.getElementById("txtpwd").value;
 28             var reg = /^[\d\w]{6,12}$/;
 29             if(!reg.test(pwd)){
 30                 span_pwd.innerHTML = "0至12以内数字,字母或组合";
 31             }else{
 32                 span_pwd.innerHTML="格式正确";
 33             }
 34         }
 35         
 36         function iphone(){
 37             var userTel = document.getElementById("txttel").value;
 38             var reg = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
 39             if(!reg.test(userTel)){
 40                span_tel.innerHTML="请输入正确的手机号";
 41             }else{
 42                 span_tel.innerHTML="格式正确";
 43             }
 44         }
 45     
 46     </script>
 47 </head>
 48 <body style="background-color:rgb(153,204,255);width: 1920px;height: 800px;overflow: scroll;overflow-x: hidden">
 49 <div id="container" class="container overflow">
 50     <div class="header">
 51         <ul class="header_menu">
 52             <li><a class="menu_format" href="login.php">渔乐</a></li>
 53             <li><a class="menu_format" href="index.php">主页</a></li>
 54             <li><a class="menu_format" href="about.html">关于</a></li>
 55             <li><a class="menu_format" href="faq.html">FAQ</a></li>
 56             <li><a class="menu_format" href="download.html">下载</a></li>
 57         </ul>
 58     </div>
 59 
 60     <div class="content">
 61         <div class="register">
 62             <div class="nav">
 63                 <a href="login.php">登录</a>
 64                 <a href="register.php">注册</a>
 65             </div>
 66             <form action="reg.php" method="post" onsubmit="return check()">
 67                 <div class="format">
 68                     <div style="border: 2px solid white;float: left;padding: 2px;box-sizing: border-box">
 69                     <div class="register_icon "></div>
 70                     <input class="register_input" type="text" required placeholder="昵称" name="userName" id = "txtname" onBlur="user()">
 71                     </div>
 72                     <label class="register_label" id="span_name"></label>
 73                 </div>
 74 
 75                 <div class="format">
 76                     <div style="border: 2px solid white;float: left;padding: 2px;box-sizing: border-box">
 77                         <div class="register_icon2"></div>
 78                         <input class="register_input" type="password" required placeholder="密码(6-16个字符组成,区别大小写)" name="userPassword" id = "txtpwd" onBlur="passWord()">
 79                     </div>
 80                     <label class="register_label" id="span_pwd"></label>
 81                 </div>
 82 
 83                 <div class="format">
 84                     <div style="border: 2px solid white;float: left;padding: 2px;box-sizing: border-box">
 85                         <div class="register_icon3"></div>
 86                         <input class="register_input" type="tel" required placeholder="填写常用手机号码" name="userTel" id="txttel" onBlur="iphone()">
 87                     </div>
 88                     <label class="register_label" id="span_tel"></label>
 89                 </div>
 90 
 91                 <div class="format">
 92                     <div style="border: 2px solid white;float: left;padding: 2px;box-sizing: border-box">
 93                         <div class="register_icon4">
 94                             <!--通过增加或者减少display2Block类来实现按钮的切换-->
 95                             <a id="toggle1" class="display display2Block " href="#" style="width: 100%;height: 100%;background-color:#09f;">点击获取</a>
 96                             <a id="toggle2" class="display " href="#" style="width: 100%;height: 100%;"><p style="display: inline">60</p>秒后重新获取</a>
 97                         </div>
 98                         <input class="register_input register_input2" type="text" required placeholder="请输入短信验证码" name="VerificationCode">
 99                     </div>
100                     <label class="register_label">验证码错误</label>
101                 </div>
102                 <div class="format register_button">
103                     <input class="register_button" value="注册" type="submit" style="border: none;">
104                 </div>
105             </form>
106             <div class="outLink">
107                 <div class="outLink_tips"></div>
108                 <div class="register2QQ">
109                     <a href="" style="display: block;width: 40px;height: 33px;"></a>
110                 </div>
111                 <div class="register2WX">
112                     <a href="#" style="display: block;width: 40px;height: 33px;"></a>
113                 </div>
114             </div>
115         </div>
116 
117     </div>
118 </div>
119 
120 
121 <script src="js/register.js"></script>
122 <script src="js/pagescreen.js"></script>
123 </body>
124 </html>

转载于:https://www.cnblogs.com/AGoodDay/p/10808604.html