Как может vee-validate проверяет электронную почту и телефон одновременно - PullRequest
Новая
       9

Как может vee-validate проверяет электронную почту и телефон одновременно

0 голосов
/ 26 апреля 2018

Я написал свой валидатор для телефона и использую его вот так

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 validate 

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

Я хочу подтвердить, что имя пользователяадрес электронной почты или номер телефона, но, кажется, не работает.Как я могу решить эту проблему?

1 Ответ

0 голосов
/ 27 апреля 2018

Проблема, с которой вы сталкиваетесь, заключается в том, что все правила 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, будет успешным.

...