Laravel场景下Vue.js邮箱验证支持多邮箱输入的可行性及实现问询

当然可以调整，你当前用的是单邮箱校验规则，只需要自定义适配多邮箱场景的校验规则即可，操作步骤如下：

步骤1：修改输入框属性 #

把原有邮箱输入框的type="email"改为type="text"，避免浏览器原生单邮箱校验规则拦截多邮箱输入：

<input type="text" name="contact_email" v-model="$v.contact_email.$model" class="form-control">

步骤2：自定义多邮箱校验规则 #

基于你已经引入的单邮箱校验器email，新增多邮箱校验逻辑：

import { email } from 'vuelidate/lib/validators'

// 自定义多邮箱校验规则：支持英文逗号分隔多个邮箱
const multiEmail = (value) => {
  // 若允许空值直接返回true，不允许空可后续搭配required规则使用
  if (!value) return true
  // 拆分邮箱并去除前后空格，过滤空项
  const emailArr = value.split(',').map(item => item.trim()).filter(Boolean)
  // 逐个校验每个邮箱格式合法性
  return emailArr.every(singleEmail => email(singleEmail))
}

步骤3：替换原有校验规则 #

修改验证规则配置，把原来的单邮箱email规则换成自定义的multiEmail：

validations: {
  contact_email: {
    multiEmail
  },
},

步骤4：调整错误提示 #

修改模板中的错误提示对应新的规则名：

<div v-if="$v.contact_email.$dirty">
  <p class="error" v-if="!$v.contact_email.multiEmail">请输入合法的邮箱地址，多个邮箱请用英文逗号分隔</p>
</div>

可选扩展 #

如果需要限制可输入的邮箱数量，可在multiEmail规则中增加长度判断，比如限制最多输入20个邮箱，只需要在返回判断中增加对应条件即可：

return emailArr.length <= 20 && emailArr.every(singleEmail => email(singleEmail))

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