文号验证-同时对两个输入框验证

文号验证-同时对两个输入框验证

效果：

一、假如有多个文号：

1. <div v-for="(item, index) in approvalForm.productApprovalTypeEvents" :key="index">
2. <el-form-item
3.         label="文号"
4.         :prop="'productApprovalTypeEvents.' + index"
5.         :rules="rules.combinedRule"
6. >
7.         证监许可〔<el-input v-model="item.noOne" style="width: 30%" clearable @input="handleInputNum($event, 'noOne', index)"></el-input>〕
8.         <el-input v-model="item.noTwo" style="width: 30%" clearable @input="handleInputNum($event, 'noTwo', index)"></el-input>号
9. </el-form-item>
10. </div>

复制代码

1. rules: {
2.         combinedRule: [
3.                 { required: true, message: '无效证监许可号', trigger: 'blur' },
4.                 { validator: combinedRuleValidator, trigger: 'blur' },
5.         ],
6. }
8. function combinedRuleValidator(rule: any, value: any, callback: any) {
9.         // 获取当前表单项对应的对象
10.         // console.log(value, 'valueeee');
11.         const noOne = value.noOne;
12.         const noTwo = value.noTwo;
13.         if (!noOne || !noTwo) {
14.                 callback(new Error('无效证监许可号'));
15.         } else {
16.                 callback();
17.         }
18. }
19. // 证监许可号
20. function handleInputNum(val: string, field: string, fIndex: number) {
21.         state.approvalForm.productApprovalTypeEvents[fIndex][field] = val.replace(/\D/g, '');
22. }
23.                                

复制代码

二、单个文号：

1. <el-form-item
2.         v-if="sendInfoForm.apvlFileType == '1' || sendInfoForm.apvlFileType == '2'"
3.         :label="sendInfoForm.apvlFileType == '1' ? '批复文号' : sendInfoForm.apvlFileType == '2' ? '变更批复文号' : '文号'"
4.         prop="noOne"
5.         :rules="rules.combinedRule"
6. >
7.         证监许可〔<el-input
8.                 v-model="sendInfoForm.noOne"
9.                 style="width: 35% !important"
10.                 clearable
11.                 @input="handleInputNum($event, 'noOne')"
12.         ></el-input
13.         >〕
14.         <el-input v-model="sendInfoForm.noTwo" style="width: 34% !important" clearable @input="handleInputNum($event, 'noTwo')"></el-input
15.         >号
16. </el-form-item>

复制代码

1. rules:{
2.         combinedRule: [
3.                 { required: true, message: '无效证监许可号', trigger: ['blur', 'change'] },
4.                 { validator: combinedRuleValidator, trigger: 'blur' },
5.         ],
6. }
7. function combinedRuleValidator(rule: any, value: any, callback: any) {
8.         if (!state.sendInfoForm.noOne && !state.sendInfoForm.noTwo) {
9.                 callback(new Error('无效证监许可号'));
10.         } else if (!state.sendInfoForm.noOne) {
11.                 callback(new Error('无效证监许可号'));
12.         } else if (!state.sendInfoForm.noTwo) {
13.                 callback(new Error('无效证监许可号'));
14.         } else {
15.                 callback();
16.         }
17. }
18. // 证监许可号
19. function handleInputNum(val: string, field: string) {
20.         state.sendInfoForm[field] = val.replace(/\D/g, '');
21. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。