Полноценная валидация HTML-форм на сайте с помощью плагина для фреймворка VueJS. Моментальная сигнализация об ошибках заполнения и прочие колбеки.
Что такое валидация форм и зачем она нужна
Проверка корректного заполнения формы на стороне клиента — важный этап обмена данными между пользователем и сервером. Как правило, это валидация полей e-maila, телефона, чисел и так далее. Как раз такую функцию и выполняет плагин для Vue.js — VeeValidate.
Используя данный плагин, Вы не должны делать ничего необычного в вашем приложении, большая часть работы идет в html, вам нужно только указать для каждого <input/>, какие валидаторы должны использоваться при изменении значения. Ошибки будут сгенерированы автоматически. Плагин предлагает множество проверок из коробки.
Несмотря на то, что большинство проверок выполняются автоматически, вы можете использовать валидатор, как Вы считаете нужным. Объект validator не имеет зависимостей и является самостоятельным объектом. Этот плагин построен с учетом локализации. Читайте документацию для получения дополнительной информации.
Установка плагина для валидации форм HTML5
Вы можете установить этот плагин через npm или через CDN.
npm install vee-validate --save
или
<script src="path/to/vue.js"></script> <script src="path/to/vee-validate.js"></script>
Базовый пример:
<div class="column is-12">
<label class="label" for="email">Email</label>
<p :class="{ 'control': true }">
<input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
<span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
</p>
</div>
export default {
name: 'basic-example'
};
Для проверки вводимых данных доступно более 20 правил. Все можно посмотреть здесь — http://vee-validate.logaretm.com/rules.html
Скачать файлы плагина можно по ссылке выше.