0

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

<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>

2 ответа 2

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

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

5
  • Да, круто, но как переделать если номер будет в формате +380334445522 ??? 22 окт 2020 в 9:43
  • из <input> убрать minlength, maxlength сделать = 13 (что соответствует длине +380334445522), в методе onlyNumbers() заменить "!/^[\d]{10}$/" на "!^\+[\d]{12}$", это позволит проверять внесенное в <input> на то, соответствует ли оно "+DDDDDDDDDDDD", где D - число [0-9]
    – cyberhaha
    22 окт 2020 в 9:54
  • @babakov.roman678 как вариант - также можно подключить любой mask модуль для vue, например этот, и добавить к <input> соответствующий v-mask, затем проводить проверки (либо исходя из документации выбранного mask модуля, либо любым иным способом)
    – cyberhaha
    22 окт 2020 в 9:58
  • перекиньте пожалуйста на кодепен, у меня почему-то не заработало 22 окт 2020 в 10:08
  • @babakov.roman678 в комментарии неправильно указал, заменить "!/^[\d]{10}$/" на "!/^\+[\d]{12}$/" - вот так. codepen обновил также
    – cyberhaha
    22 окт 2020 в 10:22
0

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

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.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.