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>
