正则表达式注册 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9 </head>
 10 <style>
 11     form {
 12         width: 350px;
 13         margin: 50px auto;
 14         border: 1px solid black;
 15         padding: 20px;
 16     }
 17 
 18     input {
 19         margin: 10px;
 20         text-align: center;
 21     }
 22 
 23     button {
 24         margin-left: 42%;
 25     }
 26 
 27     span {
 28         color: red;
 29     }
 30     
 31 </style>
 32 
 33 <body>
 34     <form>
 35         <p>用户名:</p><input type="text" class="name"><span class="names"></span><br>
 36         <p>密码:</p><input type="text" class="mi"><span class="mis"></span><br>
 37         <p>重复密码:</p><input type="text" class="mi2"><span class="mi2s"></span><br>
 38         <p>手机号:</p><input type="text" class="tel"><span class="tels"></span><br>
 39         <p>邮箱:</p><input type="text" class="email"><span class="emails"></span><br>
 40         <button>确定</button>
 41     </form>
 42 
 43     <script>
 44         var button = document.querySelector('button');
 45         var f = document.querySelector('form')
 46         var names, mis, mi2s, tels, emails;
 47         names = document.querySelector('.names');
 48         mis = document.querySelector('.mis');
 49         mi2s = document.querySelector('.mi2s');
 50         tels = document.querySelector('.tels');
 51         emails = document.querySelector('.emails');
 52         var name1 = document.querySelector('.name');
 53         var mi1 = document.querySelector('.mi');
 54         var mi2 = document.querySelector('.mi2');
 55         var tel1 = document.querySelector('.tel');
 56         var email1 = document.querySelector('.email');
 57         //用户名验证
 58         name1.onfocus = function () {
 59             names.innerText = '';
 60         }
 61         name1.onblur = function () {
 62             var name = document.querySelector('.name').value;
 63             var regName = /[\u4e00-\u9fa5]/g;
 64             if (name === "") {
 65                 names.innerText = '用户名不能为空';
 66                 return false;
 67             }
 68             if (name.length > 5 || name.length < 3) {
 69                 names.innerHTML = '用户名长度不规范';
 70                 return false;
 71             }
 72             if (regName.test(name) === false) {
 73                 names.innerText = '用户名不规范';
 74                 return false;
 75             }
 76         }
 77 
 78         // 密码验证
 79         mi1.onfocus = function () {
 80             mis.innerText = '';
 81         }
 82         mi1.onblur = function () {
 83             var mi = document.querySelector('.mi').value;
 84             var regMi = /^[a-zA-Z]\w{5,9}$/;
 85             // var res = regMi.test(mi);
 86 
 87             if (mi == "") {
 88                 mis.innerText = '密码不能为空';
 89                 return false;
 90             }
 91             if (mi.length > 10 || mi.length < 6) {
 92                 mis.innerText = '密码长度不规范';
 93                 return false;
 94             }
 95             if (regMi.test(mi) === false) {
 96                 mis.innerText = '密码不规范';
 97                 return false;
 98             }
 99         }
100         //密码二次验证
101         mi2.onfocus = function () {
102             mi2s.innerText = '';
103         }
104         mi2.onblur = function () {
105             var mi = document.querySelector('.mi').value;
106             var mi2 = document.querySelector('.mi2').value;
107 
108             if (mi != mi2) {
109                 mi2s.innerText = '密码不一致';
110                 return false;
111             }
112 
113         }
114         //手机验证
115         tel1.onfocus = function () {
116             tels.innerText = '';
117         }
118         tel1.onblur = function () {
119             var tel = document.querySelector('.tel').value;
120             var regTel = /^1[345789]\d{9}$/;
121             if (tel === "") {
122                 tels.innerText = "手机号不能为空";
123                 return;
124             }
125             if (tel.length != 11) {
126                 tels.innerText = "手机号长度有误";
127                 return;
128             }
129             if (regTel.test(tel) === false) {
130                 tels.innerText = "手机号不符合规则";
131                 return;
132             }
133         }
134         //邮箱验证
135         email1.onfocus = function () {
136             emails.innerText = '';
137         }
138         email1.onblur = function () {
139             var email = document.querySelector('.email').value;
140             var regEmail = /^\w\w+@(163|126|qq|sina)\.com$/;
141             if (email == '') {
142                 emails.innerText = '邮箱不能为空';
143                 return;
144             }
145             if (regEmail.test(email) === false) {
146                 emails.innerText = '邮箱不符合规则';
147                 return;
148             }
149         }   
150     </script>
151 </body>
152 
153 </html>

 

posted @ 2019-08-21 22:31  无人问及  阅读(214)  评论(0)    收藏  举报