Vue3中如何替换表单多输入字段验证的大量if条件块

问题描述 #

我的Vue3应用中有一个表单，包含多个输入字段，这些文本输入字段根据单选框选择显示。目前通过传入字段名和对应文本输入的v-model值来验证字段，功能正常，但使用了大量if条件块做非空验证。尝试用对象数组映射简化但未成功，想知道如何改写这些if条件块为更简洁的语法。

原条件块代码 #

const inputValidation = () => {
  if (form1.value.radio3 === 'Pass') {
    validateInputField('field1', formInputs.value.txtArea1);
  }
  if (formInputs.value.radio4 === 'Pass') {
    validateInputField('field2', formInputs.value.txtArea2);
  }
  if (formInputs.value.radio4 === 'fail') {
    validateInputField('field3', formInputs.value.txtArea6);
  }
  if (formInputs.value.radio5 === 'fail') {
    validateInputField('field4', formInputs.value.txtArea3);
  }
  if (formInputs.value.radio6 === 'Pass') {
    validateInputField('field5', formInputs.value.txtArea4);
  }
  if (formInputs.value.radio6 === 'fail') {
    validateInputField('field6', formInputs.value.txtArea5);
  }
  if (formInputs.value.radio7 === 'fail') {
    validateInputField('field7', formInputs.value.txtArea7);
  }
  if (formInputs.value.radio8 === 'fail') {
    validateInputField('field8', formInputs.value.txtArea8);
  }
  if (formInputs.value.radio9 === 'fail') {
    validateInputField('field9', formInputs.value.txtArea9);
  }
};

已创建的映射数组 #

const tempFieldArray = [
  { radio: 'radio3', value: 'Pass', input: 'txtArea1', field: 'field1' },
  { radio: 'radio4', value: 'Pass', input: 'txtArea2', field: 'field2' },
  { radio: 'radio4', value: 'fail', input: 'txtArea6', field: 'field3' },
  { radio: 'radio5', value: 'fail', input: 'txtArea3', field: 'field4' },
  { radio: 'radio6', value: 'Pass', input: 'txtArea4', field: 'field5' },
  { radio: 'radio6', value: 'fail', input: 'txtArea5', field: 'field6' },
  { radio: 'radio7', value: 'fail', input: 'txtArea7', field: 'field7' },
  { radio: 'radio8', value: 'fail', input: 'txtArea8', field: 'field8' },
  { radio: 'radio9', value: 'fail', input: 'txtArea9', field: 'field9' },
];

简化方案 #

你之前的数组缺少对数据源的区分（第一个条件用的是form1.value，其余用formInputs.value），只需补充数据源标识，再通过遍历数组判断条件即可替代所有if块：

第一步：完善映射数组 #

给每个项添加source字段，标记单选框所属的响应式对象：

const tempFieldArray = [
  { source: 'form1', radio: 'radio3', value: 'Pass', input: 'txtArea1', field: 'field1' },
  { source: 'formInputs', radio: 'radio4', value: 'Pass', input: 'txtArea2', field: 'field2' },
  { source: 'formInputs', radio: 'radio4', value: 'fail', input: 'txtArea6', field: 'field3' },
  { source: 'formInputs', radio: 'radio5', value: 'fail', input: 'txtArea3', field: 'field4' },
  { source: 'formInputs', radio: 'radio6', value: 'Pass', input: 'txtArea4', field: 'field5' },
  { source: 'formInputs', radio: 'radio6', value: 'fail', input: 'txtArea5', field: 'field6' },
  { source: 'formInputs', radio: 'radio7', value: 'fail', input: 'txtArea7', field: 'field7' },
  { source: 'formInputs', radio: 'radio8', value: 'fail', input: 'txtArea8', field: 'field8' },
  { source: 'formInputs', radio: 'radio9', value: 'fail', input: 'txtArea9', field: 'field9' },
];

第二步：重写验证函数 #

用forEach遍历数组，动态获取单选框值并判断条件，匹配时调用验证函数：

const inputValidation = () => {
  tempFieldArray.forEach(item => {
    // 根据source获取对应响应式对象的单选框值
    const radioValue = item.source === 'form1' ? form1.value[item.radio] : formInputs.value[item.radio];
    if (radioValue === item.value) {
      validateInputField(item.field, formInputs.value[item.input]);
    }
  });
};

说明 #

• 用**对象属性访问符[]**来动态获取响应式对象中的属性（比如form1.value[item.radio]），这是实现动态映射的关键；
• 后续新增验证规则时，只需在tempFieldArray中添加新的配置项，无需修改验证函数逻辑，扩展性更强。

内容的提问来源于stack exchange，提问作者learningMonk