vee-validate 如何同时验证电子邮件和电话

Question

我已经为电话编写了一个自定义验证器并像这样使用它

html

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

<script>
import { MobileValidate } from '@/validates/MobileValidates'

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

电话验证

const MOBILEREG = /^((1[3578][0-9])+\d{8})$/;

export const MobileValidate = {
    getMessage(field, args) {
        return 'phone is wrong';
    },
    validate(value, args) {
        console.log(MOBILEREG.test(value), value)
        return MOBILEREG.test(value);
    }
};

我想验证用户名是电子邮件还是电话号码，但似乎不起作用。我怎么解决这个问题？

Answer 1

您遇到的问题是 VeeValidate 规则都是AND基于；这意味着正在'required|email|phone'检查用户名字段是否具有值并且它是电子邮件并且它是电话号码。

为了解决您的问题，您需要在规则旁边使用完全自定义的required规则。这可以通过以下方式完成：

const phoneOrEmailRule = {
  getMessage(field, args) {
    return `The ${field} must be either a valid phone number or e-mail`;
  },
  validate(value, args) {

    // Custom regex for a phone number 
    const MOBILEREG = /^((1[3578][0-9])+\d{8})$/;

    // Check for either of these to return true
    return VeeValidate.Rules.email(value) || MOBILEREG.test(value);
  }
};

创建规则后，您需要将其添加到 VeeValidate 验证器。

VeeValidate.Validator.extend('phoneOrEmail', phoneOrEmailRule);

之后，您可以将其添加到字段中。

  <input type="text" name="username" v-model="username" class="username" v-validate="'required|phoneOrEmail'">

这是一个 CodePen，它显示了它在工作时的外观。对于测试，您可以使用任何通过 VeeValidate 的正常电子邮件规则的有效电子邮件；当涉及到电话号码时，它将基于您的正则表达式，因此像这样的值13112345678会成功。