如何确保v-combobox中所有项均遵循邮箱验证规则？

当前你写的规则没法实现需求，原因是开启multiple后，v-combobox的v-model绑定的toModel是数组类型，但你的规则函数把value当成单个字符串处理，只会检查数组整体（而非每个元素），导致只要数组里有有效项，验证就不会失败。

必须手动遍历数组编写自定义规则，具体实现步骤如下：

1. 编写数组级验证规则 #

规则函数接收的value是整个邮箱数组（或对象数组，取决于你的v-model绑定值），需要遍历每一项做格式校验：

情况1：v-model绑定的是纯邮箱字符串数组 #

const emailArrayRule = [
  (value) => {
    // 可选：如果要求必填，保留这行；允许空数组则删除
    if (!value || value.length === 0) return '至少需要填写一个邮箱'
    // 筛选出格式无效的邮箱
    const invalidEmails = value.filter(email => !/.+@.+/.test(email))
    // 无无效邮箱则通过，否则返回错误提示
    return invalidEmails.length === 0 || `以下邮箱格式无效：${invalidEmails.join(', ')}`
  }
]

情况2：v-model绑定的是包含email_address属性的对象数组 #

如果你的state_contacts是对象数组（比如每个元素是{email_address: 'xxx@xx.com'}），toModel会存储选中的对象，规则需要取email_address字段验证：

const emailArrayRule = [
  (value) => {
    if (!value || value.length === 0) return '至少需要填写一个邮箱'
    // 筛选出邮箱格式无效的对象
    const invalidItems = value.filter(item => !/.+@.+/.test(item.email_address))
    if (invalidItems.length > 0) {
      const invalidEmails = invalidItems.map(item => item.email_address).join(', ')
      return `以下邮箱格式无效：${invalidEmails}`
    }
    return true
  }
]

2. 绑定规则到组件 #

把组件的:rules="emailRule"改成:rules="emailArrayRule"，确保规则作用于整个数组：

<v-combobox
  color="primary"
  label="To"
  :items="stateData && stateModel ? stateData.find(item => item.state_id == stateModel?.state_id)?.state_contacts : []"
  item-title="email_address"
  v-model="toModel"
  :rules="emailArrayRule"
  chips
  multiple
  variant="outlined"
/>

核心思路 #

多选模式下，v-combobox的验证规则必须处理数组类型的输入值：

• 遍历数组中的每一项，逐个校验邮箱格式
• 只要存在任意一个无效项，就返回错误信息
• 所有项都有效时，返回true表示验证通过

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