标签：padding display nta 20px password contain order 输入 lan
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style media="screen">
9 body {
10 background: #ccc;
11 }
12 label {
13 width: 40px;
14 display: inline-block;
15 }
16 .container {
17 margin: 100px auto;
18 width: 400px;
19 padding: 50px;
20 line-height: 40px;
21 border: 1px solid #777;
22 background: #efefef;
23 }
24 span {
25 margin-left: 25px;
26 font-size: 12px;
27 padding: 2px 20px 0;
28 color: #ccc;
29 }
30 .right {
31 color: green;
32 background: url(images/right.png) no-repeat;
33 }
34 .wrong {
35 color: red;
36 background: url(images/wrong.png) no-repeat;
37 }
38 .pwd {
39 width: 220px;
40 height: 20px;
41 background: url(images/strong.jpg) no-repeat;
42 }
43 .str1 {
44 background-position: 0 -20px;
45 }
46 .str2 {
47 background-position: 0 -40px;
48 }
49 .str3 {
50 background-position: 0 -60px;
51 }
52 .str4 {
53 background-position: 0 -80px;
54 }
55 </style>
56 </head>
57 <body>
58 <div class="container">
59 <label for="inp1">QQ</label><input type="text" name="" id="inp1"><span>输入正确的QQ号码</span><br>
60 <label for="inp2">手机</label><input type="text" name="" id="inp2"><span>输入13位手机号</span><br>
61 <label for="inp3">邮箱</label><input type="text" name="" id="inp3"><span>输入正确邮箱</span><br>
62 <label for="inp4">座机</label><input type="text" name="" id="inp4"><span>输入您的座机</span><br>
63 <label for="inp5">账号</label><input type="text" name="" id="inp5"><span>亲输入您的账号</span><br>
64 <label for="inp6">密码</label><input type="text" name="" id="inp6"><span>请输入您的密码</span><br>
65 <div id="password" class="pwd"></div>
66 </div>
67
68 <script type="text/javascript">
69 var password = document.getElementById("password");
70
71 //qq号
72 addEvent("inp1",function(){
73 if (/^[1-9][0-9]{4,}$/.test(this.value)) {
74 setClassInner(this,"right","恭喜您,输入正确！");
75 }else {
76 setClassInner(this,"wrong","格式错误！");
77 }
78 });
79
80 //手机号
81 addEvent("inp2",function(){
82 if (/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/.test(this.value)) {
83 setClassInner(this,"right","恭喜您,输入正确！");
84 }else {
85 setClassInner(this,"wrong","格式错误！");
86 }
87 });
88
89 //邮箱
90 addEvent("inp3",function(){
91 if (/^[\w\-\.]{5,}\@[\w]+\.[\w]{2,4}$/.test(this.value)) {
92 setClassInner(this,"right","恭喜您,输入正确！");
93 }else {
94 setClassInner(this,"wrong","格式错误！");
95 }
96 });
97
98 //座机
99 addEvent("inp4",function(){
100 if (/(^0\d{2}-8\d{7}$)|(^0\d{3}-3\d{6}$)/.test(this.value)) {
101 setClassInner(this,"right","恭喜您,输入正确！");
102 }else {
103 setClassInner(this,"wrong","格式错误！");
104 }
105 });
106
107 //账号
108 addEvent("inp5",function(){
109 if (/^[a-zA-Z0-9_-]{3,16}$/.test(this.value)) {
110 setClassInner(this,"right","恭喜您,输入正确！");
111 }else {
112 setClassInner(this,"wrong","格式错误！");
113 }
114 });
115
116 //密码
117 addEvent("inp6",function(){
118 if (/^[a-zA-Z0-9_\-$]{6,18}$/.test(this.value)) {
119 setClassInner(this,"right","恭喜您,输入正确！");
120 password.className = "pwd str1";
121 //只有密码通过了，才能执行密码强度测试
122 //从大往小判断
123 if (/^[A-Za-z0-9]+[_$][A-Za-z0-9]*$/.test(this.value)) {
124 password.className = "pwd str4";
125 }else if (/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$/.test(this.value)) {
126 password.className = "pwd str3";
127 }else if (/^([a-z].*[A-Z])|([A-Z].*[a-z])$/.test(this.value)) {
128 password.className = "pwd str2";
129 }
130 }else {
131 setClassInner(this,"wrong","格式错误！");
132 }
133 });
134
135 //封装重复代码
136 function addEvent(str,fn){
137 document.getElementById(str).onblur = fn;
138 }
139 function setClassInner(aaa,rw,txt){
140 var span = aaa.nextElementSibling || aaa.nextSibling;
141 span.className = rw;
142 span.innerHTML = txt;
143 }
144 </script>
145 </body>
146 </html>
标签：padding display nta 20px password contain order 输入 lan
原文地址：https://www.cnblogs.com/knuzy/p/8893517.html
