jedi validate
v1.5.6
Jedi Validate — это легкий компонент проверки форм.
Это класс JS, и вы можете создать новый экземпляр, передав элемент DOM и объект параметров.
// npm install jedi-validate
import JediValidate from 'jedi-validate' ;
const JediValidate = new JediValidate ( document . querySelector ( '#form5' ) ) ;По умолчанию форма будет отправлена через ajax с параметрами, заданными в HTML.
Поскольку для взаимодействия предусмотрен строгий формат json, вы можете отправить форму разными способами:
Но ответ сервера всегда имеет одну структуру. Это проще реализовать.
Если вы хотите собрать исходный код, запустить тесты или внести свой вклад, сначала создайте или клонируйте этот репозиторий на свой локальный компьютер. Убедитесь, что NodeJS и npm установлены. Проверьте терминал с помощью node -v и npm -v .
Чтобы установить зависимости проекта при первом запуске,
npm install
Чтобы собрать исходный код и следить за изменениями в запуске терминала,
npm run build
Чтобы связать исходный код и передать его на localhost:4000 , запустите:
npm run dev
Откроется локальный сервер веб-пакета, на котором вы сможете перейти к нужному каталогу или ресурсу. Тестовая страница находится в example/bootstrap.html
Тесты еще не завершены, и при попытке запустить тесты в консоли или через браузер тестов возникнут ошибки выполнения.
Есть три типа вариантов:
{
ajax : {
url : null ,
enctype : 'application/x-www-form-urlencoded' ,
sendType : 'serialize' , // 'formData', 'json'
method : 'GET'
} ,
rules : { } ,
messages : { } ,
containers : {
parent : 'form-group' ,
message : 'help-block' ,
baseMessage : 'base-error'
} ,
states : {
error : 'error' ,
valid : 'valid' ,
pristine : 'pristine' ,
dirty : 'dirty'
} ,
callbacks : {
success : function ( ) {
} ,
error : function ( ) {
}
} ,
clean : true ,
redirect : true
} В опции ajax мы определяем, как отправить форму. Оно может быть null если мы не хотим, чтобы форма отправлялась, или это может быть объект со следующими параметрами:
по умолчанию: null Может быть переопределен атрибутом формы action или параметрами инициализации.
по умолчанию: 'application/x-www-form-urlencoded' Может быть переопределено атрибутом формы enctype , параметрами инициализации или sendType .
по умолчанию: 'GET' Может быть переопределен атрибутом формы method или параметрами инициализации.
по умолчанию: 'serialize'
Вы можете кодировать и отправлять данные тремя разными способами. Допустимые варианты:
'formData' — отправить форму как FormData. 'Content-type' до 'multipart/form-data''json' — отправить форму как объект JSON. Установите для 'Content-type' значение 'application/json; charset=utf-8''serialize' - отправить форму как обычный запрос. Установите для 'Content-type' 'application/x-www-form-urlencoded'Файлы можно отправлять только с использованием кодировки formData.
name=111&phone=222222222&email=wow%40wow.com
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="name"
111
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="phone"
222222222
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="email"
...
{ "name" : " 111 " , "phone" : " 222222222 " , "email" : " [email protected] " , "file" : " index.html " }Правила, используемые для проверки ввода. Каждому элементу формы будет соответствовать атрибут name с соответствующим правилом, если оно существует. Если правила не существует, проверка не произойдет.
Правила не определены по умолчанию, но их можно установить с помощью атрибутов или классов в HTML или в параметрах инициализации.
- требуется: логическое значение
- регулярное выражение: RegExp
- электронная почта: логическое значение
- тел: логическое значение
- URL: логическое значение
- размер файла: номер
- расширение: строка
Эти атрибуты можно использовать
- тип — электронная почта, телефон или URL (для каждого типа будет использоваться регулярное выражение)
- шаблон — регулярное выражение со значением атрибута
- требуется - проверьте ввод на наличие пустого значения
Пример:
< input id =" name " type =" text " name =" name " required class =" required " >
< input id =" email " type =" email " name =" email " class =" required " > Вы можете установить свои собственные правила, используя функцию addMethod :
JediValidate . addMethod ( 'methodName' , function ( value , options ) {
return true // true if valid
} , 'Error message' ) ;Добавьте правила как часть вашего объекта параметров при инициализации:
const validator = new JediValidate ( formWrapper , {
rules : {
name : {
required : true
} ,
email : {
email : true
} ,
phone : {
regexp : / ^([+]+)*[0-9x20x28x29-]{5,20}$ /
} ,
file : {
filesize : 10000 ,
extension : "html|css|txt"
}
file2 : {
filesize : [ 10000 , "two-files-checkbox" ] , // check only if checkbox checked
extension : [ "html|css|txt" , "two-files-checkbox" ] , // without recollect by default
another : [ 'param' , function ( oldData ) {
const newData = validator . collect ( 'two-files-checkbox' ) ; // manual data recollect for concrete field
return ! ! newData [ 'two-files-checkbox' ] ;
} ] ;
}
}
} ) ;Вы можете извлечь данные из всей формы или только по имени ввода. Метод возвращает новые данные.
validator . collect ( ) ; // all form
validator . collect ( 'two-files-checkbox' ) ; // one field Вы можете определить свои собственные сообщения об ошибках на случай сбоя проверки. В случае, если элемент формы не прошел проверку, будет применено сообщение, соответствующее атрибуту «имя» элемента.
messages : {
phone : {
regexp : "Invalid phone number"
} ,
file : {
filesize : "File is too big"
}
} ,
