Quasar Vue3表单条件验证异常：单选框关联输入框始终必填

错误原因 #

1. 必填规则逻辑完全颠倒
   你当前的必填规则写法是selectedEmail === 'option1' ? 'required' : true，这意味着只要选中option1，不管输入框有没有内容，都会直接返回错误提示"required"，完全搞反了“选中时验证必填”的逻辑。

2. 邮箱格式验证未加条件限制
   当前邮箱验证规则会无条件执行，不管有没有选中对应单选框，不符合“仅选中对应选项时才验证”的需求。

修正后的代码 #

<q-form ref="myForm" @submit="onSubmit">
  <q-input
    v-model="firstEmail"
    label="First E-mail"
    lazy-rules
    :rules="[
      () => {
        // 选中option1时，检查是否为空
        if (selectedEmail === 'option1') {
          return firstEmail ? true : 'This field is required'
        }
        // 未选中则跳过验证
        return true
      },
      (val) => {
        // 选中option1且输入有值时，验证邮箱格式
        if (selectedEmail === 'option1' && val) {
          return validateEmail(val) || 'Please enter a valid email'
        }
        return true
      }
    ]"
  ></q-input>
  <q-radio
    v-model="selectedEmail"
    keep-color
    val="option1"
    label="Main Email"
    color="primary"
  />

  <q-input
    v-model="secondEmail"
    label="Secondary email"
    lazy-rules
    :rules="[
      () => {
        // 选中option2时，检查是否为空
        if (selectedEmail === 'option2') {
          return secondEmail ? true : 'This field is required'
        }
        // 未选中则跳过验证
        return true
      },
      (val) => {
        // 选中option2且输入有值时，验证邮箱格式
        if (selectedEmail === 'option2' && val) {
          return validateEmail(val) || 'Please enter a valid email'
        }
        return true
      }
    ]"
  ></q-input>
  <q-radio
    v-model="selectedEmail"
    keep-color
    val="option2"
    label="Main Email"
    color="primary"
  />
</q-form>

关键逻辑说明 #

• 对于必填验证：只有选中对应单选框时，才检查输入框是否为空；未选中时直接返回true（跳过验证）。
• 对于邮箱格式验证：只有选中对应单选框且输入框有内容时，才执行邮箱格式校验；否则直接通过验证。

内容的提问来源于stack exchange，提问作者Otorrinolaringologista -man