Робота плагіна jQuery validate зсередини, SavePearlHarbor

Ще одна копія хабора

Головне меню

Навігація за записами

Робота плагіна jQuery validate зсередини

Що ми дізнаємося із цієї статті: 1. Як валідувати форму. 2. Повідомлення валідації та як вони працюють. 3. Додавання своїх правил валідації. 4. Що саме відбувається, коли ми викликаємо метод валідації.

Як валідувати форму

Є 2 основних способи, щоб валідувати форму.

1. Використовувати імена класів як правила

Як це працює

Ми додаємо до поля, яке потрібно провалідувати, html атрибут "class", і це підключить валідацію. Отже, якщо нам потрібно, щоб текстове поле було обов'язковим, ми додаємо в елемент input значення атрибута class = «reqiured»

Так ви можете додати до певних класів кілька правил.

Плюси та мінуси такого підходу: Працює лише з правилами, які не приймають аргументів. Ми використовуємо html атрибут "class" для того, для чого він не призначений. Але його легко встановити.

Використання методу«addClassRules»

Використання функції addClassRules дає нам можливість використовувати складове правило для одного класу.

Цей код додає 2 нових правила для класу «name» і «zip», і якщо у нас є елемент «input», у якого клас «zip», то до нього застосовуються правила: його значення є обов'язковим, користувач може вводити лише цифри і довжина має бути точно 5 символів.

Інформація: Щоб використовувати власне повідомлення для певного правила requires у складеному правилі, нам потрібно вигадати псевдонім для правила «required», створити нове правило з цим псевдонімом і встановити для нього повідомлення за умовчанням.

Або ми можемовикористовувати HTML атрибут «title», його значення буде повідомленням про помилку для складеного правила.

Примітка: Валідація на ім'я класу працює тільки для правил валідації, які не приймають жодних аргументів.

2. Додавання правил як JSON об'єкта до методу validate()

За назвою ви повинні були здогадатися, що цей метод валідації приймає об'єкт json, тому ми можемо визначити поля, які нам потрібно валідувати і правила валідації для них.

Примітка: Коли ми передаємо об'єкт "rules" функції "validate" ключем, має бути значення атрибута "name", а не значення "id". Як можна побачити в прикладі: ключ - це "userEmail", значення атрибуту "name", а атрибут "id" - інше значення.

Плюси та мінуси цього підходу:

Цей підхід дає можливість використовувати більше правил валідації, які приймають аргументи, такі як minlength, remote, equalTo і т.д. Відмінний і налаштований вручну контроль над усім. Але користувач повинен виконувати окрему функцію "validate" з різними опціями для кожної форми.

Додавання чи видалення динамічних правил.

Додавання правил

Щоб додати правило, ми повинні використовувати метод "rules" для елементів jQuery після того, як форма провалідована і передавати як перший параметр рядок "add" і як другий параметр - об'єкт правил, які ми хочемо додати до цього елемента (також ми можемо передавати об'єкт "повідомлення" для правил, які ми додали).

Видалення правил

Якщо ми хочемо видалити правило або набір правил, ми передаємо рядок «remove», як перший параметр для методу «rules», а другим параметром буде рядок, який містить правила, які ми хочемо видалити, відокремлені пропуском.

Підхід налаштування вручну

Цей підхід дужекорисний, якщо у вас є створені правила та об'єкти повідомлень, ви можете розширити правила валідатора своїми власними:

Повідомлення валідації та як вони працюють

Є три способи настроїти повідомлення валідації

1. Передати об'єкт "messages" методу "validate". Об'єкт «messages» складається з пар ключ/значення. Ключ - це значення атрибута "name" елемента. Значення - об'єкт, що містить кожне правило та його повідомлення.

2. Визначити значення атрибута "title" елемента

3. Використовувати стандартне повідомлення. Коли визначається правило валідації, є вбудовані стандартні повідомлення для вбудованих правил.

Примітка: Ці три способи перевизначають один одного, ґрунтуючись на пріоритетності, найпріоритетніший – переданий об'єкт «messages», а найменш пріоритетний – повідомлення за замовчуванням.

Додавання власних правил валідації

Коли ми хочемо додати більше правил валідації, ніж визначено за умовчанням, ми використовуємо метод$.validator.addMethod

Цей метод приймає як параметри таке:

• ім'я правила;
• функцію, яка здійснює валідацію;
• повідомлення за промовчанням.

Функція, яка здійснює валідацію, може бути з двома або трьома параметрами

Давайте поясню ці параметри. Значення: значення DOM елемента, який буде валідуватись Елемент: сам елемент DOM Параметри: те, що ми передаємо як значення. Для цього прикладу правила валідації - це те, чому має дорівнювати params.

у цьому прикладі params дорівнюватиме

Приклад додавання власного правила:

Що саме відбувається, коли ми викликаємо метод "validate"

Коли ми викликаємо метод validate на формі, за лаштунками відбувається багато різних речей:

Створюється об'єкт «validator» з усіма правилами та опціями, приєднаними до форми. Метод validate приєднує validator використовуючи "$.data". Ми можемо отримати його, вибравши форму та викликавши функцію jQuery "$.data" і передати її «validator». Об'єкт «vaidator» — це метадані для валідації, які дають нам можливість доступу до опцій валідації в будь-який час життєвого циклу сторінки. Використовуючи цей об'єкт, ми можемо змінити під час виконання опції, які ми передали методу валідації, такі як додавання або видалення правил, зміна поведінки, якщо поле є валідним або невалідним, або навіть введення селектора ігнорування.

Примітка: Коли ви викликаєте метод "validate" на формі, яка вже провалідована, він поверне лише об'єкт "validator", використовується також $.data, і всі попередні опції, передані методом "validate", будуть стерті.

Приєднання подій форми

Що станеться, коли ми натиснемо submit(надіслати форму), і у формі буде введено неправильне значення для поля, до якого ми приєднали валідацію. Якщо одне з полів невалідне, то плагін валідації придивлятиметься до нього більш уважно, щоб перевіряти, валідне воно чи ні, за подіями на цьому полі. Події форми, на які підписується плагін - це "click", "focusin", "focusout", "keyup", "submit". Нотатка: Ви можете вимкнути валідацію за певними подіями, передавши їх як ключі у методі validate, і false як значення.

---