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之类的值将成功。

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

HTML

电话验证

1 个答案: