注册用户的正则验证 

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title>正则表单验证</title>
  7         <style media="screen">
  8             .main {
  9                 width: 300px;
 10                 margin: auto;
 11             }
 12             
 13             .box1,
 14             .box2,
 15             .box3,
 16             .box4,
 17             .box5,
 18             .box6,
 19             .box7 {
 20                 margin: 10px 0px;
 21             }
 22             
 23             .nam,
 24             .pw1,
 25             .pw2,
 26             .yx,
 27             .phone {
 28                 width: 220px;
 29                 height: 25px;
 30                 margin: 5px 0px;
 31             }
 32             
 33             .tips {
 34                 font-size: 12px;
 35                 color: red;
 36                 display: none;
 37             }
 38             
 39             .zc {
 40                 width: 60px;
 41                 font-size: 18px;
 42                 text-align: center;
 43                 background: rgb(74, 189, 204);
 44                 border-radius: 5px;
 45                 color: white;
 46             }
 47         </style>
 48     </head>
 49 
 50     <body>
 51         <div class="main">
 52             <div class="box1">
 53                 <div class="wod">用户名:</div>
 54                 <input class="nam" type="text" name="name" value="">
 55                 <div class='tips'>用户名长度在20个字符以内</div>
 56             </div>
 57 
 58             <div class="box2">
 59                 <div class="wod">
 60                     密码:
 61                 </div>
 62                 <input class="pw1" type="password" name="name" value="">
 63                 <div class='tips'>请输入6-20位密码(必须有大小写及数字)</div>
 64             </div>
 65 
 66             <div class="box3">
 67                 <div class="wod">
 68                     确认密码:
 69                 </div>
 70                 <input class="pw2" type="password" name="name" value="">
 71                 <div class='tips'>密码与上面输入一致</div>
 72             </div>
 73 
 74             <div class="box4">
 75                 <div class="wod">
 76                     邮箱:
 77                 </div>
 78                 <input class="yx" type="email" name="name" value="">
 79                 <div class='tips'>请输入电子邮件</div>
 80             </div>
 81 
 82             <div class="box5">
 83                 <div class="wod">
 84                     手机号:
 85                 </div>
 86                 <input class="phone" type="text" name="name" value="">
 87                 <div class="tips">
 88                     请输入11位手机号
 89                 </div>
 90             </div>
 91 
 92             <div class="box6">
 93                 性别:男<input class="xb" type='radio' name="name" value="" checked> 女
 94                 <input class="xb" type='radio' name="name" value="">
 95 
 96             </div>
 97 
 98             <div class="box7">
 99                 <button class="zc" type="button" name="button">注册</button>
100             </div>
101 
102         </div>
103     </body>
104     <script type="text/javascript">
105     var tips = document.getElementsByClassName('tips');
106         //用户名验证
107         var nm=document.querySelector('.nam');
108         nm.onblur=function () {
109             var nmNum=nm.value;
110             var re=/^\w{6,20}$/g;
111             var rez=re.test(nmNum);
112             if (rez==true) {
113                 tips[0].style.display='block';
114                 tips[0].innerHTML = '格式正确';
115             }else if (nmNum=='') {
116                 tips[0].style.display='block';
117                 tips[0].innerHTML = '用户名不能为空';
118             }else{
119                 tips[0].style.display='block';    
120                 nm.value='';
121             }
122         }
123         
124         //密码验证
125         var pw1=document.querySelector('.pw1');
126         pw1.onblur=function  () {
127             var pw1Num=pw1.value;
128             var re=/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,20}$/g;  //密码必须有大小写字母和数字且6-20位
129             var rez=re.test(pw1Num);
130             if (rez==true) {
131                 tips[1].style.display='block';
132                 tips[1].innerHTML = '格式正确';
133             }else if(pw1Num==''){
134                 tips[1].style.display='block';
135                 tips[1].innerHTML = '密码不能为空';            
136             }else{
137                 tips[1].style.display='block';
138             }
139         }
140         
141         //确认密码验证
142         var pw2=document.querySelector('.pw2');
143         pw2.onblur=function () {
144             if (pw2.value==pw1.value&&pw2.value!='') {
145                 tips[2].style.display='block';
146                 tips[2].innerHTML = '两次输入一致';
147             }else if (pw2.value=='') {
148                 tips[2].style.display='block';
149                 tips[2].innerHTML = '不能为空';
150             }else{
151                 tips[2].style.display='block';
152                 tips[2].innerHTML = '两次输入不一致';
153                 pw2.value='';
154             }
155         }
156         var phone = document.querySelector('.phone');
157         
158         //验证手机号码
159         phone.onblur = function() {
160             var phNumber = phone.value;
161             var re = /1(31|32|34|35|36|37|38|39|50|57|58|86|87|88)[0-9]{8}/g;
162             var wrResult = re.test(phNumber);
163             if(wrResult == true && phNumber.length == 11) {
164                 tips[4].style.display = 'block';
165                 tips[4].innerHTML = '格式正确';
166             } else if(phNumber == '') {
167                 tips[4].style.display = 'block';
168             } else {
169                 tips[4].style.display = 'block';
170                 tips[4].innerHTML = '请输入正确的手机号';
171                 phone.value = '';
172             }
173         }
174         
175         //验证邮箱
176         var yx = document.querySelector('.yx');
177         yx.onblur = function() {
178             var yxads = yx.value;
179             var reg = /^\w+@[a-z0-9]+(\.[a-z]{2,3}){1,2}$/g;
180             var yxResult = reg.test(yxads);
181             if(yxResult == true) {
182                 tips[3].style.display = 'block';
183                 tips[3].innerHTML = '格式正确';
184             } else if(yxads == '') {
185                 tips[3].style.display = 'block';
186                 tips[3].innerHTML = '请输入邮箱地址';
187             } else {
188                 tips[3].style.display = 'block';
189                 tips[3].innerHTML = '格式不正确';
190                 yx.value = '';
191             }
192         }
193     </script>
194 
195 </html>

 

posted @ 2016-11-14 15:51  温故余学  阅读(4166)  评论(0)  编辑  收藏  举报