lhvalidator
v0.2.2
Published
Плагин для валидации форм. Представляет собой ES6 class.
Downloads
4
Readme
#lhvalidator Плагин для валидации форм. Представляет собой ES6 class.
##Установка
npm install --save lhvalidator
##Подключение
import Lhvalidator from 'lhvalidator'
##Вызов
const myValidator = new Lhvalidator(selector, settings);
где selector
- это селектор форм которые необходимо валидировать, settings
- объект настроек
##Пример использования
HTML
<form>
<div>
<input type="text" name="phone">
</div>
<button type="submit" class="send">Отправить</button>
</form>
JavaScript
const myValidator = new Lhvalidator('form', {
fields: {
phone: {
rules: {
required: true,
minlength: 3,
maxlength: 5,
reg: /^\d+$/, //только числа
},
messages: {
required: 'Это поле обязательно для заполнения',
minlength: 'Минимальная длинна 3',
maxlength: 'Максимальная длинна 5',
reg: 'Введите верные символы',
},
container: '.form-group'
}
},
classNames: {
valid: 'valid-field',
nonValid: 'error-field',
error: 'error-message',
button: 'send',
},
success: form => console.log(form),
})
##Настройки
| Опции | Описание |
|-------------------------|------------------------------------------------------------------------|
| fields
| Имена полей для валидации |
| success
| Функция вызываемая в случае успешной вадиции всех полей |
| classNames
| Объект имен классов для полей формы и сообщений об ошибках |
###fields
Тут указывается список имен полей которые необходимо валидировать.
Имя - это значение атрибута name
.
Для каждого поля указваются правила - rules
по которым стоит валидировать это поле,
сообщения об ошибках messages
и container
селектор ближайшего предка в котором будет искаться
поля с одинаковыми атрибутами name
(для радио кнопок) и в конец которого будет помещено сообщение
об ошибке
####rules
| Название | Кратко | Детально |
|-------------|----------------------------------|------------------------------------------------------------------------------------|
| required
| Обязательно для заполнения/выбора| Для обычных текстовых полей это свойство означает что должен быть введет хоть один символ, для select
что значение не должно быть пустым, для radio и checkbox с одинаковыми именами означает что должен быть выбрать какой-либоу пункт |
| minlength
| Минимальная длина | Справедливо для обычных текстовых полей, все значения приводятся к строковому типу |
| maxlength
| Максимальная длина | Справедливо для обычных текстовых полей, все значения приводятся к строковому типу |
| reg
| Регулярное выражение | Проверка по регулярному выражению на соответствие |
####messages
Названия свойств должны совпадать с названиями свойств в rules
, значениями должны быть только строки.
####container
Селектор по которому будет искаться ближайший предок, в котором будет искаться поля с одинаковыми
атрибутами name
и в конец этого контейнера будет помещено сообщение об ошибке.
###classNames Cписок названий CSS классов для невалидный/валидныйх полей, сообщений об ошибке и кнопки "Отправить"
| Название | Значение по умолчанию | Описание |
|------------|-------------------------------|---------------------------------------------------------------|
| valid
| form__input_valid
| Присваевается полю прошедшему валидацию |
| nonValid
| form__input_error
| Присваевается полю не прошедшему валидацию |
| error
| form__error
| Присваевается сообщению об ошибке |
| button
| form__submit
| На этот класс вешается обработчик запускающий валидацию формы |
###success Метод вызываемый в случае успешной валидации всех полей формы. В качестве значения может быть только функция, в аргументы которой передается форма
success: form => console.log(form);
###myValidator.clear(form) Метода экземпляра класса очищает следы валидации формы, но не обнуляет значения полей. Принимает аргументом форму которая должна иметь селектор переданный в текущий экземпляр класса.