Валидация номера телефона на Vue.js

Question

Как указазать что если условия обработки номера в инпуте не буду выполнятся тогда сделаем его красным. Если всё хорошо зеленым

<input type="text" placeholder="+380" class="input-tel" v-model="phone"
       @keypress="onlyNumbers" maxlength=10 minlength=10 >

Вот стили

.notvalid {border: 1px solid red;}
.valid {border: 1px solid lightgreen;}

Метод обработки ввода только чисел (номера телефона)

onlyNumbers(event) {
        let keyCode = event.keyCode ? event.keyCode : event.which;
         if (keyCode < 48 || keyCode > 57) {
            event.preventDefault();
        }
    }

Кнопка отправки запроса (Работает тогда если условия выполняются)

<button @click="secondReg()" type="submit">Get code</button>

Answer 1

Можно лучше, но это один из вариантов решения проблемы

Сначала разберемся с классами valid и novalid

<input type="text"
  placeholder="+380"
  class="input-tel"
  :class="{'notvalid': failedValidation.phone, 'valid': failedValidation.phone===false}"
  v-model="phone"
  @input="onlyNumbers"
  maxlength="10"
  minlength="10">

Ивент keypress заменить на ивент input, в prop :class можно передать объект с классами, которые будут применены по условию

В данном случае: класс notvalid применяется, если failedValidation.phone === true, а класс valid, если failedValidation.phone === false

data() будет выглядеть примерно так:

data() {
  return {
    failedValidation: {
      phone: null
    },
    phone: ''
  }
}

Удобно использовать объект failedValidation, потому что можно проверять, входящие в него структуры, как бы отделяя их от остального кода

С учетом нового кода изменим и методы:

methods: {
  onlyNumbers() {
    this.failedValidation.phone = !/^[\d]{10}$/.test(this.phone) ? true : false;
  },

  secondReg(){
    if( !this.failedValidation.phone ){
      // если телефон удачно проверен
      alert('ok')
    }
    else {
      // если проверка не пройдена
      alert('error')
    }
  }
}

Метод onlyNumbers() проверяет по регулярному выражению значение input (т.к. v-model для input это переменная phonе, то проверяет её). Если значение не соответствует регулярному выражению, то failedValidation.phone становится true, иначе false

Метод secondReg() проверяет failedValidation.phone и производит дальнейшие действия в зависимости от значения true или false

Рабочий пример

Answer 2

Во первых вам не нужен метод, он избыточен, по хорошему наборы правил валидации вынести в отдельный файл, а саму валидацию переложить в вычисляемые свойства:

import validators from '~/validalors.js'

export default {
  data: () => ({
    phone: null,
  }),
  computed: {
    isInvalidPhone() {
      return !validators.validatePhone(this.phone);
    },
  },
};

Затем уже в шаблоне вы можете использовать это свойство:

<template>
  <input
    v-model="phone"
    :class={ notvalid: isInvalidPhone }
    class="input-tel"
    type="text"
    placeholder="+380"
    maxlength="10"
    minlength="10"
  >
</template>

Соотвественно класс инпута по умолчанию можно сделать valid, а далее invalid будет обрабатываться реактивно. Ну и далее вы можете использовать это вычисляемое свойство в методе secondReg.

БЛОГ НА HUSL

Валидация номера телефона на Vue.js

Ответы (2 шт):