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

Posted 2021-04-06

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

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

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

答案

您遇到的问题是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这样的值会成功。