文號驗證-同時對兩個輸入框驗證
效果:
一、如果有多個文號:
<div v-for="(item, index) in approvalForm.productApprovalTypeEvents" :key="index">
<el-form-itemlabel="文號":prop="'productApprovalTypeEvents.' + index":rules="rules.combinedRule"
>證監許可〔<el-input v-model="item.noOne" style="width: 30%" clearable @input="handleInputNum($event, 'noOne', index)"></el-input>〕<el-input v-model="item.noTwo" style="width: 30%" clearable @input="handleInputNum($event, 'noTwo', index)"></el-input>號
</el-form-item>
</div>
rules: {combinedRule: [{ required: true, message: '無效證監許可號', trigger: 'blur' },{ validator: combinedRuleValidator, trigger: 'blur' },],
}function combinedRuleValidator(rule: any, value: any, callback: any) {// 獲取當前表單項對應的對象// console.log(value, 'valueeee');const noOne = value.noOne;const noTwo = value.noTwo;if (!noOne || !noTwo) {callback(new Error('無效證監許可號'));} else {callback();}
}
// 證監許可號
function handleInputNum(val: string, field: string, fIndex: number) {state.approvalForm.productApprovalTypeEvents[fIndex][field] = val.replace(/\D/g, '');
}
二、單個文號:
<el-form-itemv-if="sendInfoForm.apvlFileType == '1' || sendInfoForm.apvlFileType == '2'":label="sendInfoForm.apvlFileType == '1' ? '批復文號' : sendInfoForm.apvlFileType == '2' ? '變更批復文號' : '文號'"prop="noOne":rules="rules.combinedRule"
>證監許可〔<el-inputv-model="sendInfoForm.noOne"style="width: 35% !important"clearable@input="handleInputNum($event, 'noOne')"></el-input>〕<el-input v-model="sendInfoForm.noTwo" style="width: 34% !important" clearable @input="handleInputNum($event, 'noTwo')"></el-input>號
</el-form-item>
rules:{combinedRule: [{ required: true, message: '無效證監許可號', trigger: ['blur', 'change'] },{ validator: combinedRuleValidator, trigger: 'blur' },],
}
function combinedRuleValidator(rule: any, value: any, callback: any) {if (!state.sendInfoForm.noOne && !state.sendInfoForm.noTwo) {callback(new Error('無效證監許可號'));} else if (!state.sendInfoForm.noOne) {callback(new Error('無效證監許可號'));} else if (!state.sendInfoForm.noTwo) {callback(new Error('無效證監許可號'));} else {callback();}
}
// 證監許可號
function handleInputNum(val: string, field: string) {state.sendInfoForm[field] = val.replace(/\D/g, '');
}