|
|
| (7 проміжних версій 3 користувачів не показані) |
| Рядок 1: |
Рядок 1: |
| − | Валідація HTML-форм і розширення функціональності з пісочниці
| + | Про Валідацію можна зустріти багато суперечок дехто вважає зf непотрібнісnm перевірки коду , я вважаю і навіть рекомундую використувувати валідатор бо некожну помилку можна натйи самому і можна з економити багато часу ) |
| − | Валідації HTML-форм приділяють дуже мало уваги. Наприклад, навіть на habrahabr.ru поки я реєструвався і входив на сайт кілька разів мені видавалося повідомлення про помилку: то код протекції ввів неправильно, то в логіні вказав email замість логіна. А ще буває користувачі помиляються з кількістю цифр в номері телефону або реквізитах організації, плутають російську літеру «с» з англійською, при копіюванні та вставці в Windows зайві пропуски додаються до даних. | + | |
| | | | |
| − | Звичайно, все це не смертельно. Але було б украй зручно, щоб дані перевірялися ще до відправки на сервері. Особливо CAPTCHA, бо її часто вводиш з помилкою. | + | Кожен хто хоч раз писав прогрмами чи розробяв WEB - сторінки строінок стикавася з проблемою допущення помилок , або непроавельної лоігки написаного браузером . |
| | + | Тому хочу розкрити таке питання як Валідація . |
| | + | Валідаія це коли браузер намагаючись відобразити коду написної сторінки ,при зустрічі з помилками в коді пробує найбліьш коректно підправити та заповнити ці помилки .Звичайно звіучить красиво собі пишеш допускаєш помилки , а брузер тобі виправляє помилик , але основна проблема в тому що кожен браузер може доповнювати ці помилки порізному. |
| | | | |
| − | Для вирішення даної проблеми були кілька способів: HTML5, jQuery Validate, zForms.ru і ще ряд менш відомих бібліотек. Але всі ці способи мали свої недоліки: HTML5 підтримується не всіма браузерами і не має опції не відправляти незаповнені поля, задати повідомлення про невідповідність регулярному виразу, обмежити список допустимих символів для введення в поле, можливості склеювати поля, посилати значення чекбоксів у форматі csv або суми значень.
| + | Є два типи помилок : |
| | + | 1)Помилки в коді _ досить легко виявити ці помилки тому що при відображені браузером коду ми може побачити де яка частина коду відображається погано. |
| | + | 2)Помилки в логіці - це складніші помилки таим що ї набагато чяжче виявити їх , можна виявити за допомогою певних програм або при тесуванні вручну яке займе дуже багато часу тому я рекомендую ліпше використувувати програму . |
| | | | |
| − | У zForms.ru немає вихідного, немає можливості вказати, що перевірка користувальницької функцією ресурсномістка і її потрібно робити за подією onChange, а не onKeyup. Функціональність задається дуже громіздким оформленням, яке заважає оформити форму як нам того хочеться. І багато параметри передаються у вигляді: onclick = «return {oOptions: {sPlaceHolder: Не більше 10 символів ', iMaxLength: 10}}», що є не найпростішим чином для веб-майстра. | + | На даний час розробники браузерів встановлють певні норми валідації ,для однкового відбраження сторінок у різних брузерах. |
| | + | Отже хочу навести декілька можливих програм та методів віалдації |
| | + | 1) Можна для первірки правельності коду використувувати спеціально прграми або онлайн валідатори на прикладі W3C. |
| | + | Використовуючи валідатр W3C ви закидаєте код в нього і бачете як він відкомпільвує. Один із недолікв вноьму це те що він показує набагато більше пмилок ніж існує. Він інколи сприймає каскад сторінки як деякі помилки .ТОму при виході страшних цифри можете нобоятись просто почати прегляд свої помилок виправити і занову відкомпілювати. |
| | + | 2) Метод можна використувавти деякі функції які надає Брузер на прикладі Opera там є функція Validate . |
| | + | Хочу навсети останньу з причну чому варто використувуати валідацію тому що на мою думку браузери будть у маюбтньму удосконалюватися і я вважаю що будуть менш поблажними до помилок. |
| | | | |
| − | jQuery Validate вимагає знань javascript і jQuery. Хоча зрозуміло, що тут можна запрограмувати HTML-форму як завгодно.
| + | Автор студент групи ПЗАС-11 Поляруш Олег |
| − | | + | |
| − | Але нам потрібен був простий інструмент для веб-майстри, де можна було просто задавати додаткові атрибути тегів input, select, а вся функціональнасть підключається автоматично. Ось ми і написали бібліотеку ITForms.class.js. Бібліотека безкоштовна і активно розвивається. Ось що вже зараз підтримується:
| + | |
| − | <form… data-dont-send-empty-fields=1> - Якщо data-dont-send-empty-fields = true в тегу form, то перед відправленням будуть видалені всі незаповнені поля введення. Дуже зручно для фільтрів пошуку, коли інформація передається методом GET.
| + | |
| − | <Input ... data-min-length - мінімальна кількість символів для текстових полів. data-min-length = 1 означає по суті, що поле обов'язково до заповнення.
| + | |
| − | <Input ... data-regexp - перевірка текстового поля на регулярний вираз.
| + | |
| − | <Input ... data-enable-chars - список допустимих символів, інші символи з клавіатири ввести не вийде.
| + | |
| − | <Input ... data-placeholder - встановлює Placeholder в текстове поле. Відрізняється від стандартної реалізації HTML5 тим, що якщо в полі ввести символи і потім встановити пусте значення, то data-placeholder показуватися не буде щоб не бентежити користувача. У вас є вибір яка поведінка вибирати стандартне - placeholder або data-placeholder.
| + | |
| − | <Input | select ... data-help - створює підказку при установці фокуса на текстове поле.
| + | |
| − | <Select ... data-combobox - встановити для поточного списку комбобокс.
| + | |
| − | <Input ... data-min-value - мінімальне значення числа та дати;
| + | |
| − | <Input ... data-max-value - максимальне значення числа та дати;
| + | |
| − | <Select multiple = «multiple» ... data-min-selected - мінімальна кількість вибраних елементів в select-multiple.
| + | |
| − | <Select multiple = «multiple» ... data-max-selected - максимальна кількість обраних елементів в select-multiple.
| + | |
| − | <Input type = file ... data-file-type - тип завантаження. Може бути вказано кілька типів через кому.
| + | |
| − | <Input | select ... data-user-func - виклик для користувача функції для додаткової перевірки. Користувацька функція повертає повідомлення про помилку або порожній рядок у разі успішної перевірки. Користувацька функція може перевіряти валідність поля в залежності від значень інших полів форми. Також вона може динамічно в залежності від значення поля довантажувати AJAX'ом нові нові поля форми, дані, змінювати інші поля форми. Приклад: data-user-func = «funcAlert ('1 параметр ', '2 параметр');»
| + | |
| − | <Input ... data-datepicker | data-datetimepicker | date-timepicker - встановлюємо для поточного поля один з трьох календарів.
| + | |
| − | <Input ... data-async - Якщо data-async = true, то значення перевіряється після введення кожного символу. Якщо data-async = false, то значення поля перевіряється після зняття з нього фокусу або перед відправкою.
| + | |
| − | <Input ... data-slider - прив'язуємо повзунок. Детальніше дивіться приклад.
| + | |
| − | <Input ... data-regexp-err-msg - повідомлення про помилку в разі невідповідності регулярному виразу.
| + | |
| − | | + | |
| − | | + | |
| − | Публічні методи:
| + | |
| − | setCheckboxProperty (checkboxname, sendAs, minSelected, maxSelected);
| + | |
| − | / / SendAs може бути:
| + | |
| − | / / 'Csv' - тоді значення вибраних чекбоксів надсилаються у вигляді checkboxname = v1, v2, v3 ... vn
| + | |
| − | / / 'Sum' - тоді значення вибраних чекбоксів бінарно складаються s = v1 | v2 | v3 ... | vn і надсилається checkboxname = s
| + | |
| − | / / В інших випадках і якщо не задано нічого чекбокси посилаються на сервер в стандартному вигляді.
| + | |
| − | addMergeableField (fieldname, separator, inputs) / / ім'я поля в яке будуть склеєні значення інших полів, роздільник, список полів для об'єднання
| + | |
| − | addEventListeners ($ ('jQuery selector')) / / після динамічного додавання елемента вводу в форму треба додати для нього обробники подій.
| + | |
| − | itform.setRadioProperty ('radioinput', 1); / / встановлюємо required = 1, щоб зробити вибір обов'язковим.
| + | |
| − | | + | |
| − | Подивитись як все це працює в дії і завантажити бібліотеку можна на сайті itforms.ru
| + | |
| − | | + | |
| − | Будемо раді зауважень і пропозицій.
| + | |
| − | | + | |
| − | - Важливе доповнення!
| + | |
| − | | + | |
| − | 1. Всім ще раз велике спасибі за зауваження, багато я вже реалізував. На черзі введення базових типів.
| + | |
| − | | + | |
| − | 2. Велике прохання подивитися вихідний код itforms.class.js Є там деякі косяки з ім'ям змінних і методів, десь стиль загальний порушений, десь я не підібрав доброго імені. За стилем розстановок дужок, табуляцій замість пробілів і т.п. сперечатися не буду, про смаки сенсу сперечатися немає, а от якщо будуть зауваження по справі, буду радий. Цілком можуть виявитися ляпи, баги.
| + | |
| − | | + | |
| − | В планах є додавання мов. Але спочатку хочеться алгоритм налагодити, щоб код не захаращувати.
| + | |
Про Валідацію можна зустріти багато суперечок дехто вважає зf непотрібнісnm перевірки коду , я вважаю і навіть рекомундую використувувати валідатор бо некожну помилку можна натйи самому і можна з економити багато часу )
Кожен хто хоч раз писав прогрмами чи розробяв WEB - сторінки строінок стикавася з проблемою допущення помилок , або непроавельної лоігки написаного браузером .
Тому хочу розкрити таке питання як Валідація .
Валідаія це коли браузер намагаючись відобразити коду написної сторінки ,при зустрічі з помилками в коді пробує найбліьш коректно підправити та заповнити ці помилки .Звичайно звіучить красиво собі пишеш допускаєш помилки , а брузер тобі виправляє помилик , але основна проблема в тому що кожен браузер може доповнювати ці помилки порізному.
Є два типи помилок :
1)Помилки в коді _ досить легко виявити ці помилки тому що при відображені браузером коду ми може побачити де яка частина коду відображається погано.
2)Помилки в логіці - це складніші помилки таим що ї набагато чяжче виявити їх , можна виявити за допомогою певних програм або при тесуванні вручну яке займе дуже багато часу тому я рекомендую ліпше використувувати програму .
На даний час розробники браузерів встановлють певні норми валідації ,для однкового відбраження сторінок у різних брузерах.
Отже хочу навести декілька можливих програм та методів віалдації
1) Можна для первірки правельності коду використувувати спеціально прграми або онлайн валідатори на прикладі W3C.
Використовуючи валідатр W3C ви закидаєте код в нього і бачете як він відкомпільвує. Один із недолікв вноьму це те що він показує набагато більше пмилок ніж існує. Він інколи сприймає каскад сторінки як деякі помилки .ТОму при виході страшних цифри можете нобоятись просто почати прегляд свої помилок виправити і занову відкомпілювати.
2) Метод можна використувавти деякі функції які надає Брузер на прикладі Opera там є функція Validate .
Хочу навсети останньу з причну чому варто використувуати валідацію тому що на мою думку браузери будть у маюбтньму удосконалюватися і я вважаю що будуть менш поблажними до помилок.
