1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>IFE JavaScript Task 32</title>
6 <style>
7 form{
8 margin:auto;
9 width:860px;
10 font-size: 20px;
11 }
12 label{
13 display: inline-block;
14 width:150px;
15 text-align:center;
16 }
17 #buttons{
18 margin:auto;
19 height:100px;
20 width:400px;
21 display: block;
22 }
23 button{
24 display:inline-block;
25 border:1px solid #4e79b7;
26 background-color:#4e79b7;
27 width:120px;
28 height:50px;
29 margin:50px 25px 0 25px;
30 font-size: 24px;
31 color:white;
32 border-radius: 7px;
33 }
34 button:focus{
35 outline: none;
36 border:1px solid #27569c;
37 background-color:#27569c;
38 }
39 #nameid,#pw1id,#pw2id,#emailid,#phoneid{
40 width:500px;
41 height:20px;
42 margin:20px;
43 border-radius: 7px;
44 border:2px solid #ccc;
45 }
46 #nameid:focus,#pw1id:focus,#pw2id:focus,#emailid:focus,#phoneid:focus{
47 outline: none;
48 border:2px solid #7dace9;
49 border-radius: 7px;
50 box-shadow: 0 2px 2px 2px #e1edfa;
51 }
52 .message{
53 margin-left:180px;
54 }
55 .right{
56 margin-left:180px;
57 color: #81b950;
58 }
59 .wrong{
60 margin-left:180px;
61 color:#bd0315;
62 }
63 </style>
64 </head>
65 <body>
66 <form id="factory">
67 </form>
68 <div id="buttons">
69 <button id="submit">生成表单</button>
70 <button id="testButton">验证</button>
71 </div>
72 <form id="show">
73 </form>
74 <script type="text/javascript" >
75 function $(id){
76 return document.getElementById(id);
77 }
78 //创建表单工厂
79 function form(label,type,rules,success,fail,id,func){
80 this.label=label;
81 this.type=type;
82 this.rules=rules;
83 this.success=success;
84 this.fail=fail;
85 this.id=id;
86 this.validator=func;
87 }
88 //验证输入是否合规
89 var inputCheck={
90 namefunc:function(){
91 var name=$('nameid').value,
92 length=checkLength(name);
93 if(/^[a-zA-Z0-9u4e00-u9fa5]+$/.test(name)&&length>=4&&length<=16) a=1;
94 else a=0;
95 },
96 pw1func:function (){
97 var pw1=$('pw1id').value;
98 if(/^[A-Za-z0-9]{8,16}$/.test(pw1))
99 a=1;
100 else a=0;
101 },
102 pw2func:function (){
103 var pw1=$('pw1id').value,
104 pw2=$('pw2id').value;
105 if (pw2==pw1&&/^[A-Za-z0-9]{8,16}$/.test(pw2))
106 a=1;
107 else a=0;
108 },
109 emailfunc:function (){
110 var email=$('emailid').value;
111 if(/w+([-+.´]w+)*@w+([-.]w+)*.w+([-.]w+)*/.test(email)) a=1;
112 else a=0;
113 },
114 phonefunc:function (){
115 var phone=$('phoneid').value;
116 if(/^1[34578]d{9}$/.test(phone))a=1;
117 else a=0;
118 }
119 }
120 //用于生成验证表单
121 var nameForm=new form('名称','text','长度为4~16字符','验证成功','名称错误','nameid',inputCheck.namefunc),
122 pw1=new form('密码','password','长度为8~16字符，只能为数字、大小写字母','密码可用','密码不可用','pw1id',inputCheck.pw1func),
123 pw2=new form('确认密码','password','再次输入相同密码','密码输入一致','密码输入不一致','pw2id',inputCheck.pw2func),
124 email=new form('邮箱','text','请输入有效邮箱地址','邮箱格式正确','邮箱格式错误','emailid',inputCheck.emailfunc),
125 phone=new form('手机号','text','请输入手机号','手机格式正确','手机格式错误','phoneid',inputCheck.phonefunc),
126 makeForm=[nameForm,pw1,pw2,email,phone];
127 //被勾选的选项存储子在newForm中
128 var newForm=[],a;
129 //用于生成初始表单
130 var checkName=new form('名称','checkbox','nameBox'),
131 checkPw1=new form('密码','checkbox','pw1Box'),
132 checkPw2=new form('确认密码','checkbox','pw2Box'),
133 checkEamil=new form('邮箱','checkbox','emailBox'),
134 checkPhone=new form('手机号','checkbox','phoneBox'),
135 nomal=[checkName,checkPw1,checkPw2,checkEamil,checkPhone];
136 //生成初始表单
137 window.onload=function(){
138 var content='';
139 for(var i=0;i<nomal.length;i++){
140 content+='<label for="'+nomal[i].rules+'"><input class="checkbox" type="'+nomal[i].type+'" id="'+nomal[i].rules+'"name="'+nomal[i].rules+'">'+nomal[i].label+'</label>';
141 }
142 $('factory').innerHTML=content;
143 };
144 //点击生成表单
145 $("submit").addEventListener("click",function(e){
146 var result='',
147 checkBoxes=document.getElementsByClassName('checkbox');
148 for(var i=0;i<checkBoxes.length;i++){
149 if(checkBoxes[i].checked&&i!=2){
150 newForm.push(makeForm[i]);
151 result+='<label for="'+makeForm[i].id+'">'+makeForm[i].label+'</label><input id="'+makeForm[i].id+'"type="'+makeForm[i].type+'"><br/><div class="message" id="'+makeForm[i].id+'Result">'+makeForm[i].rules+'</div>';
152 }
153 if(checkBoxes[i].checked&&i==2){
154 if(checkBoxes[1].checked){
155 newForm.push(makeForm[i]);
156 result+='<label for="'+makeForm[i].id+'">'+makeForm[i].label+'</label><input id="'+makeForm[i].id+'"type="'+makeForm[i].type+'"><br/><div class="message" id="'+makeForm[i].id+'Result">'+makeForm[i].rules+'</div>';
157 }
158 else continue;
159 }
160 }
161 $("show").innerHTML=result;
162 });
163 //点击验证
164 $('testButton').addEventListener("click",function(e){
165 for(var i=0;i<newForm.length;i++){
166 var newid=newForm[i].id+'Result'; //输出信息的div的id
167 var x=newForm[i].validator(); //调用验证函数
168 if(a==1){
169 $(newid).innerHTML=newForm[i].success;
170 $(newid).className="right";
171 }
172 else{
173 $(newid).innerHTML=newForm[i].fail;
174 $(newid).className="wrong";
175 }
176
177 }
178 });
179 //检验名称有多少个字符
180 function checkLength(str){
181 var len =0,temp=0;
182 for(var j=0;j<str.length;j++){
183 temp = 1;
184 if(/^[u2E80-u9FFF]+$/.test(str[j])){
185 temp = 2;
186 }
187 len += temp;
188 }
189 return len;
190 }
191 </script>
192 </body>
193 </html>