Vuerify-это простой и легкий плагин проверки данных. Встроенные базовые правила проверки и подсказки ошибок. Настраиваемые правила, а типы правил поддерживают регулярные, функции или строки. Правила проверки могут быть зарегистрированы во всем мире или в компонентах. Плагин добавит объект $ vuerify в виртуальную машину и в то же время следит за данными и проверяет законность. Если есть ошибка, виртуальная машина $ vuerify. $ Ошибки будут сохранены.
Установить
npm i vuerify -S
использовать
Установите плагины
Импорт Vue из 'vue'import vuerify из' vuerify'vue.use (vuerify, /* Добавить пользовательские правила* /)
Добавьте пользовательские правила
Тест может быть регулярным или функцией
{требуется: {test: // s+$/, сообщение: 'обязательно'}}Зарегистрироваться в компонентах
{data () {username: '', password: '' '}, vuerify: {username: {test: // w {4,}/, // Пользовательские правила, которые могут быть функциями, регулярные или глобальные правила регистрации (заполнение строков):' Сообщение не менее 4 символов '}, пароль: «Требуется' // правила использования глобальной регистрации}}}}}}}}}}}}}}}}API
$ vuerify содержит следующие свойства
nameScriptionTypedefault Value
$ Ошибки сообщения об ошибке не смогли проверить данные, например, если имя пользователя не проверяет, оно вернется {username: 'не менее 4 символов} объект {}
Invalid имеет поле, которое не смогло проверить Booleantrue
Действительно не имеет поле, которое не может проверить BooleanFalse
Проверьте указанное поле, пропустите его в массив и верните BooleanFunction (массив)-
Очистить функцию очистки списка ошибок-
V-Vuerrify
Эта директива проверяет данные и устанавливает имя класса для компонента, когда компонент формы запускает событие размытия (по умолчанию. Vuerify-invalid). Это могут быть собственные компоненты, такие как вход, или это может быть компонент, который был инкапсулирован сам по себе. Доступны две версии
Установить
# Vue 1.xnpm v-vuerify -s# vue 2.0npm v-vuerify-next -s
Использование
Import Vue From 'vue'import vuerifydirective из' v-vuerify '// vue1.ximport vuerifydirective из' v-vuerify-next '// vue2.0vue.use (vuerifydirective) <input v-model = "username" v-vuerify = "' username '"> <x-input: value.sync "vawerse.sync =" valy.sync "" valy.sync ". v-vuerify = "'password'"> </x-input>
Парамет
Проверьте INVALIDCLASS
Имя класса по умолчанию-Vuerify-invalid
<input v-model = "username" v-vuerify = "" username '"vuerify-invalid-class =" error ">
Модификаторы
родительский
Если Vuerify зарегистрирован в родительском компоненте, вам необходимо указать родителя, чтобы директива могла получить соответствующий $ vuerify от родительского компонента. Для получения подробной информации см. Демо
События
Vuerify-invalid
Vuerify-Valid
Github: https://github.com/qingwei-li/vuerrify