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

Question

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

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>

phone 验证

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);
    }
};

我想验证用户名是电子邮件还是 phone 号码，但它似乎不起作用。我该如何解决这个问题？

Answer 1

您运行遇到的问题是 VeeValidate 规则都是基于 AND 的；这意味着 'required|email|phone' 正在检查用户名字段是否有值并且它是一封电子邮件并且它是一个 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'">

Here's a CodePen that shows how it looks when it's working。对于测试，您可以使用任何通过 VeeValidate 的正常电子邮件规则的有效电子邮件；当涉及 phone 数字时，它将基于您的正则表达式，因此像 13112345678 这样的值会成功。

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

How can vee-validate validates email and phone at the same time

vue.js

vuejs2

vee-validate

html

phone 验证