文号验证-同时对两个输入框验证
效果:
一、如果有多个文号:
html
<div v-for="(item, index) in approvalForm.productApprovalTypeEvents" :key="index">
<el-form-item
label="文号"
: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>
typescript
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, '');
}
二、单个文号:
html
<el-form-item
v-if="sendInfoForm.apvlFileType == '1' || sendInfoForm.apvlFileType == '2'"
:label="sendInfoForm.apvlFileType == '1' ? '批复文号' : sendInfoForm.apvlFileType == '2' ? '变更批复文号' : '文号'"
prop="noOne"
:rules="rules.combinedRule"
>
证监许可〔<el-input
v-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>
typescript
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, '');
}