Валидация полей на VueJs?

Question

[Aleksandr]

Есть некое количество инпутов:

<div class="form-group">
 	<label class="ui-label">Идентификатор банка</label>
	<el-input v-model="id" @focus="focus" @change="change('id', $event)">ID</el-input>
 </div>
<div class="form-group">
	<label class="ui-label">БИК банка</label>
	<el-input :class="{'ERROR': !isBicValid, 'OK': isBicValid}" v-model="bank_bic" @focus="focus" @change="change('bank_bic', $event)">БИК банка</el-input>
</div>
<div class="form-group">
	<label class="ui-label">Название банка</label>
	<el-input v-model="bank_name" @focus="focus" @change="change('bank_name', $event)">Название банка</el-input>
</div>	
<div class="form-group">
	<label class="ui-label">Корреспонденский счет банка</label>
	<el-input v-model="bank_corr_account" @focus="focus" @change="change('bank_corr_account', $event)">Кор. счет банка</el-input>
</div>

Начал делать валидацию и сразу появилось несколько вопросов:
1) как лучше написать computedчтобы валидировать сразу все поля и вообще возможно это сделать?
пока сделал для одного

computed: {
	isBicValid() {
        return /^[0-9]{9}$/.test(this.bank_bic);
    }
},

2) как правильно написать условие для класса, чтобы если поле не пустое не добавлялся класс ERROR
сейчас сделал так
:class="{'ERROR': !isBicValid, 'OK': isBicValid}"
и по понятной причине добавляется ERROR как исправить?

Answer 1

[Evgeny Kulakov]

1. Есть готовые либы, например: https://github.com/monterail/vuelidate
2. Можно обернуть инпут в ваш кастомный компонент, в который вы будете передавать функцию валидации

По-второму вопросу как вариант:

computed: {
  isBicValid() {
        return this.bank_bic.length > 0 ? /^[0-9]{9}$/.test(this.bank_bic) : true
    }
},

Comments

[Aleksandr]

Спасибо

Answer 2

[Игорь]

вычисляемое свойство isBicValid - это функция. Пишите в ней что вам угодно, делайте какие угодно проверки и по их результату проверок возвращайте true или false. В своем примере вы проверяете только bank_bic, но ничего не мешает вам там же сделать проверку и остальных полей и уже потом выполнить return.

Answer 3

[planc]

https://laracasts.com/series/learn-vue-2-step-by-s...

Comments

[Aleksandr]

спасибо за ссылку, но это немного не то