vue.js - 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'">

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