Можно лучше, но это один из вариантов решения проблемы
Сначала разберемся с классами 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
Рабочий пример