如何使用vee-validate同时验证邮箱与手机号？

嘿，你现在的问题是当前规则required|email|phone会要求输入内容同时满足邮箱和手机号格式，这显然不是你想要的——你需要的是输入内容满足邮箱或者手机号其中一种格式对吧？下面给你两种可行的方案：

方案一：使用vee-validate内置的or组合规则（适用于V2版本） #

vee-validate的V2版本支持or规则来实现“满足任一规则即可”的逻辑，你只需要修改验证规则的写法，同时确保自定义phone验证器已正确注册：

模板部分修改 #

<template>
  <input type="text" name="username" class="username" v-validate="'required|or:(email,phone)'">
</template>

脚本部分（保留现有注册逻辑） #

<script>
import { MobileValidate } from '@/validates/MobileValidates'
import { Validator } from 'vee-validate' // 未导入的话需要补充

Validator.extend('phone', MobileValidate);
</script>

设置后，输入框会要求内容必须填写，且要么是合法邮箱，要么是合法手机号。

方案二：自定义email_or_phone复合验证器（更灵活，适配各版本） #

如果你的vee-validate版本不支持or规则，或者想让逻辑更清晰，可以直接自定义一个同时验证邮箱和手机号的规则：

1. 修改验证器文件（比如MobileValidates.js） #

// 邮箱正则（可复用vee-validate内置规则，也可自定义）
const EMAILREG = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
// 你的手机号正则（可优化为覆盖更多号段：/^1[3-9]\d{9}$/）
const MOBILEREG = /^((1[3578][0-9])+\d{8})$/;

// 新增邮箱/手机号二合一验证器
export const EmailOrPhoneValidate = {
  getMessage(field, args) {
    return '请输入有效的邮箱或手机号';
  },
  validate(value, args) {
    // 满足邮箱或手机号任一格式即可通过
    return EMAILREG.test(value) || MOBILEREG.test(value);
  }
};

// 保留原手机号验证器（如需单独使用）
export const MobileValidate = {
  getMessage(field, args) {
    return '手机号格式错误';
  },
  validate(value, args) {
    return MOBILEREG.test(value);
  }
};

2. 在组件中注册并使用新规则 #

<template>
  <input type="text" name="username" class="username" v-validate="'required|email_or_phone'">
</template>

<script>
import { EmailOrPhoneValidate } from '@/validates/MobileValidates'
import { extend } from 'vee-validate' // V3+版本用extend，V2用Validator.extend

// V3+版本写法
extend('email_or_phone', EmailOrPhoneValidate);

// V2版本写法：
// import { Validator } from 'vee-validate'
// Validator.extend('email_or_phone', EmailOrPhoneValidate);
</script>

这种方式的好处是错误提示更友好，用户能直接明确输入要求，而非收到两次独立的格式错误提示。

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