标签：手机 lock bsp classname mail media reg 密码 phone
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>
标签：手机 lock bsp classname mail media reg 密码 phone
原文地址：http://www.cnblogs.com/slmdr9/p/6062186.html
