javascript 常用的正则表达式验证表单 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <title>Document</title>
  8     <style media="screen">
  9         body {
 10             background: #ccc;
 11         }
 12         label {
 13             width: 40px;
 14             display: inline-block;
 15         }
 16         .container {
 17             margin: 100px auto;
 18             width: 400px;
 19             padding: 50px;
 20             line-height: 40px;
 21             border: 1px solid #777;
 22             background: #efefef;
 23         }
 24         span {
 25             margin-left: 25px;
 26             font-size: 12px;
 27             padding: 2px 20px 0;
 28             color: #ccc;
 29         }
 30         .right {
 31             color: green;
 32             background: url(images/right.png) no-repeat;
 33         }
 34         .wrong {
 35             color: red;
 36             background: url(images/wrong.png) no-repeat;
 37         }
 38         .pwd {
 39             width: 220px;
 40             height: 20px;
 41             background: url(images/strong.jpg) no-repeat;
 42         }
 43         .str1 {
 44             background-position: 0 -20px;
 45         }
 46         .str2 {
 47             background-position: 0 -40px;
 48         }
 49         .str3 {
 50             background-position: 0 -60px;
 51         }
 52         .str4 {
 53             background-position: 0 -80px;
 54         }
 55     </style>
 56 </head>
 57 <body>
 58     <div class="container">
 59         <label for="inp1">QQ</label><input type="text" name="" id="inp1"><span>输入正确的QQ号码</span><br>
 60         <label for="inp2">手机</label><input type="text" name="" id="inp2"><span>输入13位手机号</span><br>
 61         <label for="inp3">邮箱</label><input type="text" name="" id="inp3"><span>输入正确邮箱</span><br>
 62         <label for="inp4">座机</label><input type="text" name="" id="inp4"><span>输入您的座机</span><br>
 63         <label for="inp5">账号</label><input type="text" name="" id="inp5"><span>亲输入您的账号</span><br>
 64         <label for="inp6">密码</label><input type="text" name="" id="inp6"><span>请输入您的密码</span><br>
 65         <div id="password" class="pwd"></div>
 66     </div>
 67 
 68     <script type="text/javascript">
 69         var password = document.getElementById("password");
 70 
 71         //qq号
 72         addEvent("inp1",function(){
 73             if (/^[1-9][0-9]{4,}$/.test(this.value)) {
 74                 setClassInner(this,"right","恭喜您,输入正确！");
 75             }else {
 76                 setClassInner(this,"wrong","格式错误！");
 77             }
 78         });
 79 
 80         //手机号
 81         addEvent("inp2",function(){
 82             if (/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/.test(this.value)) {
 83                 setClassInner(this,"right","恭喜您,输入正确！");
 84             }else {
 85                 setClassInner(this,"wrong","格式错误！");
 86             }
 87         });
 88 
 89         //邮箱
 90         addEvent("inp3",function(){
 91             if (/^[\w\-\.]{5,}\@[\w]+\.[\w]{2,4}$/.test(this.value)) {
 92                 setClassInner(this,"right","恭喜您,输入正确！");
 93             }else {
 94                 setClassInner(this,"wrong","格式错误！");
 95             }
 96         });
 97 
 98         //座机
 99         addEvent("inp4",function(){
100             if (/(^0\d{2}-8\d{7}$)|(^0\d{3}-3\d{6}$)/.test(this.value)) {
101                 setClassInner(this,"right","恭喜您,输入正确！");
102             }else {
103                 setClassInner(this,"wrong","格式错误！");
104             }
105         });
106 
107         //账号
108         addEvent("inp5",function(){
109             if (/^[a-zA-Z0-9_-]{3,16}$/.test(this.value)) {
110                 setClassInner(this,"right","恭喜您,输入正确！");
111             }else {
112                 setClassInner(this,"wrong","格式错误！");
113             }
114         });
115 
116         //密码
117         addEvent("inp6",function(){
118             if (/^[a-zA-Z0-9_\-$]{6,18}$/.test(this.value)) {
119                 setClassInner(this,"right","恭喜您,输入正确！");
120                 password.className = "pwd str1";
121                 //只有密码通过了，才能执行密码强度测试
122                 //从大往小判断
123                 if (/^[A-Za-z0-9]+[_$][A-Za-z0-9]*$/.test(this.value)) {
124                     password.className = "pwd str4";
125                 }else if (/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$/.test(this.value)) {
126                     password.className = "pwd str3";
127                 }else if (/^([a-z].*[A-Z])|([A-Z].*[a-z])$/.test(this.value)) {
128                     password.className = "pwd str2";
129                 }
130             }else {
131                 setClassInner(this,"wrong","格式错误！");
132             }
133         });
134 
135         //封装重复代码
136         function addEvent(str,fn){
137             document.getElementById(str).onblur = fn;
138         }
139         function setClassInner(aaa,rw,txt){
140             var span = aaa.nextElementSibling || aaa.nextSibling;
141             span.className = rw;
142             span.innerHTML = txt;
143         }
144     </script>
145 </body>
146 </html>

 

posted @ 2018-04-20 20:20  叶子玉  阅读(296)  评论(0)  编辑  收藏  举报