注冊用戶的正則驗證

本文轉載自查看原文 2016-11-14 15:51 3549 JavaScript

  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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 正則驗證用戶名正則表達式---用戶驗證正則驗證用戶輸入的是否是數字 php用戶名正則驗證用戶注冊（一）之注冊頁面以及圖形驗證碼 shiro實踐(1)：注冊用戶密碼加密、登錄驗證及權限驗證使用正則表達式驗證注冊頁面（用戶名，密碼，確認密碼，郵箱，手機號）使用正則表達式驗證注冊頁面（用戶名，密碼，確認密碼，郵箱，手機號） Java 正則表達式之注冊驗證編寫一個系統（登錄、注冊、驗證用戶名密碼和驗證碼、覆蓋存儲用戶）