0、题目
- 如示例图中所示，基于上一个任务（任务29），在页面中添加多个表单
- 要求:
- 表单获得焦点时，下方显示表单填写规则
- 表单失去焦点时校验表单内容
- 校验结果正确时，表单边框显示绿色，并在下方显示验证通过的描述文字
- 校验结果错误时，表单边框显示红色，并在下方显示验证错误的描述文字
- 点击提交按钮时，对页面中所有输入进行校验，校验结果显示方式同上。若所有表单校验通过，弹窗显示“提交成功”，否则显示“提交失败”
1、解题过程
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>IFE JavaScript Task 30</title>
6 <style>
7 form{
8 margin:auto;
9 width:860px;
10 font-size: 24px;
11 }
12 label{
13 display: inline-block;
14 width:100px;
15 text-align: right;
16 }
17 input{
18 width:700px;
19 height:40px;
20 margin:20px;
21 border-radius: 7px;
22 border:2px solid #ccc;
23 }
24 input:focus{
25 outline: none;
26 border:2px solid #7dace9;
27 border-radius: 7px;
28 box-shadow: 0 2px 2px 2px #e1edfa;
29 }
30 .right{
31 outline: none;
32 border:2px solid #81b950;
33 border-radius: 7px;
34 }
35 .wrong{
36 outline: none;
37 border:2px solid #bd0315;
38 border-radius: 7px;
39 }
40 div{
41 margin-left:130px;
42 font-size: 20px;
43 }
44 button{
45 float:right;
46 border:1px solid #4e79b7;
47 background-color:#4e79b7;
48 width:120px;
49 height:50px;
50 margin-right:25px;
51 font-size: 24px;
52 color:white;
53 border-radius: 7px;
54 }
55 button:focus{
56 outline: none;
57 border:1px solid #27569c;
58 background-color:#27569c;
59 }
60 </style>
61 </head>
62 <body>
63 <form id="form">
64 <label for="name" id="nameLabel">名称</label>
65 <input id="name" type="text"/><br/>
66 <div id="result-name"></div>
67
68 <label for="pw1" id="pw1Label">密码</label>
69 <input id="pw1" type="password"/><br/>
70 <div id="result-pw1"></div>
71
72 <label for="pw2" id="pw2Label">确认密码</label>
73 <input id="pw2" type="password"/><br/>
74 <div id="result-pw2"></div>
75
76 <label for="email" id="emailLabel">邮箱</label>
77 <input id="email" type="text"/><br/>
78 <div id="result-email"></div>
79
80 <label for="phone" id="phoneLabel">手机</label>
81 <input id="phone" type="text"/><br/>
82 <div id="result-phone"></div>
83
84 <button id="submit">提交</button>
85 </form>
86
87
88 <script type="text/javascript" >
89 function $(id){
90 return document.getElementById(id);
91 }
92 $("form").addEventListener("click",function(e){
93 var id=e.target.id;
94 switch(id){
95 case "nameLabel":case "name":{
96 $("result-name").innerHTML="必填，长度为4~16字符";
97 $("result-name").style.color="#a6a6a6";
98 $("name").onblur=function(){testName($('name').value);}
99 break;
100 }
101 case "pw1Label":case "pw1":{
102 $("result-pw1").innerHTML="必填，长度为8~16字符，只能为数字、大小写字母";
103 $("result-pw1").style.color="#a6a6a6";
104 $("pw1").onblur=function(){testPw1($('pw1').value);}
105 break;
106 }
107 case "pw2Label":case "pw2":{
108 $("result-pw2").innerHTML="再次输入相同密码";
109 $("result-pw2").style.color="#a6a6a6";
110 $("pw2").onblur=function(){testPw2($('pw1').value,$('pw2').value);}
111 break;
112 }
113 case "emailLabel":case "email":{
114 $("result-email").innerHTML="请输入有效邮箱地址";
115 $("result-email").style.color="#a6a6a6";
116 $("email").onblur=function(){testEmail($('email').value);}
117 break;
118 }
119 case "phoneLabel":case "phone":{
120 $("result-phone").innerHTML="请输入手机号";
121 $("result-phone").style.color="#a6a6a6";
122 $("phone").onblur=function(){testPhone($('phone').value);}
123 break;
124 }
125 }
126 });
127 //点击提交按钮
128 $("submit").addEventListener("click",function(e){
129 if(testName($('name').value)||testPw1($('pw1').value)||
130 testPw2($('pw2').value)||testEmail($('email').value)||
131 testPhone($('phone').value)){
132 alert("提交成功!");
133 }
134 else alert("输入有误！");
135 e.preventDefault();
136 return false;
137 });
138 //名称验证
139 function testName(name){
140 var length=checkLength(name);
141 if((/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(name))&&length>=4&&length<=16){
142 $("result-name").innerHTML="验证成功!";
143 $("result-name").style.color="#81b950";
144 $("name").className="right";
145 }
146 else{
147 $("result-name").innerHTML="名称错误！";
148 $("result-name").style.color=" #bd0315";
149 $("name").className="wrong";
150 return false;
151 }
152 }
153 //检验名称有多少个字符
154 function checkLength(str){
155 var len =0,temp=0;
156 for(var j=0;j<str.length;j++){
157 temp = 1;
158 if(/^[\u2E80-\u9FFF]+$/.test(str[j])){
159 temp = 2;
160 }
161 len += temp;
162 }
163 return len;
164 }
165 //密码1验证
166 function testPw1(pw1){
167 if(/^[A-Za-z0-9]{8,16}$/.test(pw1)){
168 $("result-pw1").innerHTML="密码可用";
169 $("result-pw1").style.color="#81b950";
170 $("pw1").className="right";
171 }
172 else{
173 $("result-pw1").innerHTML="密码不可用";
174 $("result-pw1").style.color=" #bd0315";
175 $("pw1").className="wrong";
176 return false;
177 }
178 }
179 //密码2验证
180 function testPw2(pw1,pw2){
181 if(pw2==pw1&&testPw1(pw1)){
182 $("result-pw2").innerHTML="密码输入一致";
183 $("result-pw2").style.color="#81b950";
184 $("pw2").className="right";
185 }
186 else{
187 $("result-pw2").innerHTML="密码输入不一致";
188 $("result-pw2").style.color=" #bd0315";
189 $("pw2").className="wrong";
190 return false;
191 }
192 }
193 //邮箱验证
194 function testEmail(email){
195 if( /\w+([-+.´]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(email)){
196 $("result-email").innerHTML="邮箱格式正确";
197 $("result-email").style.color="#81b950";
198 $("email").className="right";
199 }
200 else{
201 $("result-email").innerHTML="邮箱格式错误";
202 $("result-email").style.color=" #bd0315";
203 $("email").className="wrong";
204 return false;
205 }
206 }
207 //手机号验证
208 function testPhone(phone){
209 if(/^1[34578]\d{9}$/.test(phone)){
210 $("result-phone").innerHTML="手机格式正确";
211 $("result-phone").style.color="#81b950";
212 $("phone").className="right";
213 }
214 else{
215 $("result-phone").innerHTML="手机格式错误";
216 $("result-phone").style.color=" #bd0315";
217 $("phone").className="wrong";
218 return false;
219 }
220 }
221 </script>
222 </body>
223 </html>
2、遇到的问题
