Слияние кода завершено, страница обновится автоматически
vee-validate — это лёгкий плагин для Vue.js, который позволяет проверять поля ввода и отображать ошибки.
Его особенность: вам не нужно делать ничего сложного в приложении, большая часть работы выполняется в HTML. Нужно только указать для каждого поля ввода, какие валидаторы использовать при изменении значения. Ошибки будут генерироваться автоматически. Плагин предлагает множество встроенных проверок.
Хотя большинство проверок происходит автоматически, вы можете использовать валидатор по своему усмотрению. У объекта валидатора нет зависимостей, он является автономным объектом. Этот плагин разработан с учётом локализации. Подробнее читайте в документации.
Этот плагин вдохновлён проверкой PHP Framework Laravel.
npm install vee-validate --save
или если вы используете Vue 1.0 (не рекомендуется):
npm install vee-validate@prev --save
Обратите внимание: версия Vue 1.0 в настоящее время устарела и не содержит последних функций и исправлений.
bower install vee-validate#2.0.0-rc.3 --save
vee-validate также доступен на jsdelivr cdn:
выберите нужную версию, которую хотите использовать.
В точке входа скрипта:
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
Теперь всё готово к использованию плагина.
Просто примените директиву v-validate к вашему полю ввода и передайте строковое значение, которое представляет собой список проверок, разделённых вертикальной чертой. Например, мы будем использовать проверки required и email:
<input v-validate="'required|email'" type="text" name="email">
Вы также можете передать объект для большей гибкости:
<input v-validate="{ rules: { required: true, email: true } }" type="text" name="email">
Теперь каждый раз, когда поле ввода изменяется, валидатор будет выполнять список проверок слева направо, заполняя объект ошибок всякий раз, когда ввод не проходит проверку.
Чтобы получить доступ к объекту ошибок (в вашем экземпляре Vue):
this.$validator.errorBag;
// или
this.errors; // внедряется плагином в $data, вы можете настроить имя свойства.
Итак, давайте отобразим ошибку для созданного нами поля электронной почты:
<!-- Здесь должен быть код отображения ошибки --> Если есть ошибка электронной почты, отобразите первое сообщение, связанное с ней.
<span v-show="errors.has('email')">{{ errors.first('email') }}</span>
Конечно, это ещё не всё, обратитесь к документации для получения более подробной информации о правилах и использовании этого плагина.
Читайте документацию и демо.
Вы можете внести свой вклад в этот репозиторий всем, что считаете полезным. Исправления приветствуются. Однако если вы добавляете новое правило проверки, оно должно иметь несколько применений или быть как можно более универсальным.
Дополнительную информацию можно найти в руководстве по вкладу.
— Некоторые проверки/сценарии тестирования предоставлены/основаны на validator.js. — Вдохновлены синтаксисом валидации Laravel. — Логотип от Абдельрахмана Исмаила
— Первый полный релиз (вне бета-версии) — середина мая 2017 года — Поддержка Vuex — конец мая / середина июня 2017 года
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )