3二、任務三十二——實現表單工廠

時間 2019-12-09

標籤任務三十二實現表單工廠欄目 HTML 简体版

原文原文鏈接

0、題目

實現以JavaScript對象的方式定義表單及驗證規則

表單配置參考示例以下：（不須要一致，僅爲參考）

{
        label: '名稱',                    // 表單標籤
        type: 'input',                   // 表單類型
        validator: function () {...},    // 表單驗證規
        rules: '必填，長度爲4-16個字符',    // 填寫規則提示
        success: '格式正確',              // 驗證經過提示
        fail: '名稱不能爲空'               // 驗證失敗提示
    }

基於該配置項，實現一套邏輯，能夠自動生成表單的展示、交互、驗證
使用你製做的表單工廠，在一個頁面上建立兩套樣式不一樣的表單

一、解題過程

  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>