首页 > 代码库 > 32、任务三十二——实现表单工厂
32、任务三十二——实现表单工厂
0、题目
- 实现以JavaScript对象的方式定义表单及验证规则
- 表单配置参考示例如下：（不需要一致，仅为参考）
{ label: ‘名称‘, // 表单标签 type: ‘input‘, // 表单类型 validator: function () {...}, // 表单验证规 rules: ‘必填，长度为4-16个字符‘, // 填写规则提示 success: ‘格式正确‘, // 验证通过提示 fail: ‘名称不能为空‘ // 验证失败提示 } - 基于该配置项，实现一套逻辑，可以自动生成表单的展现、交互、验证
- 使用你制作的表单工厂，在一个页面上创建两套样式不同的表单
1、解题过程
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-9\u4e00-\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>
2、遇到的问题
32、任务三十二——实现表单工厂
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。