直接上代碼
結構:
<repayInput v-if="formData" v-for="(item, index) in formData" :isPwd="item.parameter_code==='password'" :text="item.parameter_name.replace('社保網站','')" :textAlign="'right'" :errText="arrForm[index][`arr${item.parameter_code}`]" @changeErrText="_changeErrText2($event,index,'arr'+item.parameter_code)" :type="item.parameter_code" :maxlength="item.parameter_code==='name'?'15':'50'" :placeholder="item.parameter_message" v-model="arrForm[index][item.parameter_code]" :key="index"> </repayInput>
組織arrForm數據
_this.arrForm.length = 0; // debugger let obj = _this.formInfo[_this.socialType.value].tabs[selectedVal[selectedVal.length-1]].field; for(var j=0; j<obj.length; j++) { var strObj = `{"${obj[j].parameter_code}":"","arr${obj[j].parameter_code}":"","type":"${obj[j].parameter_code}","name${obj[j].parameter_code}":"${obj[j].parameter_name}"}`; // Vue.set(_this.arrForm, obj[j].parameter_code, ''); // Vue.set(_this.arrForm, `arr${obj[j].parameter_code}`,''); _this.arrForm.push(JSON.parse(strObj)) }
表單驗證:
//驗證動態表單 this.arrForm let _this = this; for(var i=0; i< _this.arrForm.length; i++) { var cur = _this.arrForm[i]; if( !rValidate.isEmpty(cur[cur.type],() => { cur['arr'+cur.type] = cur['name'+cur.type] + '不能為空'; }) ){ dyPro = false; } if( cur.type === 'id_card_num' ){ if( cur[cur.type]!==_this.query.cardNo ) {//驗證是否與借款人是同一人 cur['arr'+cur.type] = '請輸入身份認證時身份證賬號'; dyPro = false; } } if( cur.type === 'cell_phone_num' ){ if( !rValidate.mobile(cur[cur.type],() => { cur['arr'+cur.type] = '手機號碼格式錯誤'; }) ) { dyPro = false; } } }
組織需要提交的數據:
//組織表單參數 applyInfo _this.arrForm let applyInfo = {}; for(var i=0; i< _this.arrForm.length; i++) { var cur = _this.arrForm[i]; applyInfo[cur.type] = cur[cur.type]; } query_.applyInfo = applyInfo;