HTML5 перевірка даних веб-форм
- Що таке обмеження перевірки
- Willvalidate
- validity
- ValidationMessage
- CheckValidity ()
- SetCustomValidity ()
- атрибути HTML
- Novalidate
- Formnovalidate
- CSS
- : Valid,: invalid
- Зробити стилі за замовчуванням
Перевірка веб-форм на стороні користувачів, це дуже важливо для веб-розробників. Перед HTML5 спочатку не була поставлена задача здійснення перевірки веб-форм, тому веб-розробники вдаються до різних іншим рішенням.
Щоб полегшити роботу веб-розробникам, в HTML5 додали концепцію, відому як обмеження перевірки - засіб перевірки веб-форм на стороні користувача. Незважаючи на те, що багато є в нових версіях браузерах, тему обмеження перевірки поки можна віднести до презентації та демонстрації.
Мета цієї статті, дізнатися про нові інтерфейси API, щоб допомогти собі і веб-розробникам робити веб-форми краще. Що буде в цій статті:
- Огляд того, що обмежує перевірка.
- Дізнатися в поточному обмежень специфікації і реалізації браузерів.
- Приклади, як можна використовувати HTML5 для перевірки веб-форм.
Що таке обмеження перевірки
Користувач не повинен писати свій номер телефону в поле введення, де потрібно вказати свою електронну адресу, якщо користувач це зробив, буде помилка. Обмеження перевірки за кількістю символів, що вводять або в поле для введення телефону можна писати тільки цифри, тому що телефон складається з цифр. Щоб з'ясувати все це, алгоритм використовує нові атрибути HTML5 min, max, step, pattern, і required для типу даних, що вводяться.
Для прикладу використовуємо цю форму з порожнім input з атрибутом HTML5 required:
<Form> <input type = "text" required = "" value = "" /> <input type = "submit" value = "Відправити" /> </ form>Якщо ви спробуєте відправити цю форму порожній, без тексту, браузер відобразить наступні:
Chrome 21
Відправлено порожнє поле Chrome 21 Firefox 15
Відправлено порожнє поле Firefox 15
Internet Explorer 10
Відправлено порожнє поле Internet Explorer 10 опера 12
Відправлено порожнє поле Опера 12 Opera Mobile
Відправлено порожнє поле Opera Mobile
Chrome для Android
Відправлено порожнє поле Chrome для Android
Firefox для Android
Відправлено порожнє поле Firefox для Android Специфікація не передбачає повного DOM API, нові атрибути HTML, CSS і хукі можна використовувати тільки для вигляду форми.
API обмеження перевірки додає наступні властивості / методи DOM вузлів.
Willvalidate
Властивість WillValidate визначає, чи потрібно із сайтом обмеження перевірки. Для елемента submittable буде встановлено значення true якщо вузлу з якоїсь причини заборонити обмеження перевірки, пишемо атрибут disabled.
<Div id = "one"> </ div> <input id = "two" type = "text" /> <input id = "three" type = "text" disabled = "disabled" /> <script> document. getElementById ( 'one'). willValidate; // false document.getElementById ( 'two'). WillValidate; // true document.getElementById ( 'three'). WillValidate; // false </ script>validity
Validity властивості вузла DOM повертає об'єкт ValidityState, що містить ряд логічних властивостей, що відносяться до достовірності введених даних в поле веб-форми.
CustomError: true, якщо для повідомлень користувача був встановлений виклик setCustomValidity ().
<Input id = "foo" type = "text" /> <input id = "bar" type = "text" /> <script> document.getElementById ( 'foo'). Validity.customError; // false document.getElementById ( 'bar'). SetCustomValidity ( 'Invalid'); document.getElementById ( 'bar'). validity.customError; // true </ script>patternMismatch: true, якщо вузол value не відповідає атрибутам pattern.
<Input id = "foo" type = "text" pattern = "[0-9] {4}" value = "1 234" /> <input id = "bar" type = "text" pattern = "[0-9 ] {4} "value =" ABCD "/> <script> document.getElementById ( 'foo'). validity.patternMismatch; // false document.getElementById ( 'bar'). Validity.patternMismatch; // true </ script>rangeOverflow: tue, якщо вузол value перевищує атрибут max.
<Input id = "foo" type = "number" max = "2" value = "1" /> <input id = "bar" type = "number" max = "2" value = "3" /> <script > document.getElementById ( 'foo'). validity.rangeOverflow; // false document.getElementById ( 'bar'). Validity.rangeOverflow; // true </ script>rangeUnderflow: true, якщо вузол value має значення менше ніж атрибут min.
<Input id = "foo" type = "number" min = "2" value = "3" /> <input id = "bar" type = "number" min = "2" value = "1" /> <script > document.getElementById ( 'foo'). validity.rangeUnderflow; // false document.getElementById ( 'bar'). Validity.rangeUnderflow; // true </ script>stepMismatch: true, якщо вузол не value має значення атрибута step.
<Input id = "foo" type = "number" step = "2" value = "4" /> <input id = "bar" type = "number" step = "2" value = "3" /> <script > document.getElementById ( 'foo'). validity.stepMismatch; // false document.getElementById ( 'bar'). Validity.stepMismatch; // true </ script>tooLong: true, якщо вузол value перевищує атрибут maxlength.
Всі браузери покажуть користувачеві не вірні вступні значення, які перевищують maxlength.
<Input id = "foo" type = "text" maxlength = "1" value = "A" /> <input id = "bar" type = "text" maxlength = "1" value = "AB" /> <script > document.getElementById ( 'foo'). validity.tooLong; // false document.getElementById ( 'bar'). Validity.tooLong; // true in Opera, false in other supported browsers. </ Script>Очікуємо значення tooLong. typeMismatch: true, для WebKit і Firefox якщо у вузлі value кожен його атрибут type неправильний.
<Input id = "foo" type = "url" value = "http://foo.com" /> <input id = "bar" type = "url" value = "foo" /> <input id = "foo2 "type =" email "value =" [email protected] "/> <input id =" bar2 "type =" email "value =" bar "/> <script> document.getElementById ( 'foo'). validity. typeMismatch; // false document.getElementById ( 'bar'). Validity.typeMismatch; // true document.getElementById ( 'foo2'). Validity.typeMismatch; // false document.getElementById ( 'bar2'). Validity.typeMismatch; // true </ script>valueMissing: true, якщо вузол має обов'язковий атрибут required, але вузол value порожній.
<Input id = "foo" type = "text" required = "" value = "foo" /> <input id = "bar" type = "text" required = "" value = "" /> <script> document. getElementById ( 'foo'). validity.valueMissing; // false document.getElementById ( 'bar'). Validity.valueMissing; // true </ script>valid: true, якщо всі дії умов, перерахованих вище, є false.
<Input id = "valid-1" type = "text" required = "" value = "foo" /> <input id = "valid-2" type = "text" required = "" value = "" /> < script> document.getElementById ( 'valid-1'). validity.valid; // true document.getElementById ( 'valid-2'). Validity.valid; // false </ script>ValidationMessage
ValidationMessage властивості вузла DOM містить повідомлення, яке браузер відображає користувачеві, коли дії вузла не вдається перевірити. Браузер надає за умовчанням локалізовані повідомлення для цієї властивості. Якщо вузол DOM не є кандидатом на обмеження перевірки або, якщо вузол містить справжні дані ValidationMessage буде встановлений в порожній рядок.
Для опери не потрібно заповнювати цю властивість за замовчуванням. Воно буде показувати користувачеві правильне повідомлення про помилку, просто не заповнюється у властивостях.
<Input id = "foo" type = "text" required = "" /> <script> document.getElementById ( 'foo'). ValidationMessage; // Chrome -> 'Please fill out this field.' // Firefox -> 'Please fill out this field.' // Safari -> 'value missing' // IE10 -> 'This is a required field.' // Opera -> '' </ script>CheckValidity ()
Метод checkValidity для елементів вузла (наприклад, input, select, textarea) повертає true, якщо елемент містить достовірні дані. Форма вузлів повертає true, якщо всі форми, мають допуск дані.
<Form id = "form-1"> <input id = "input-1" type = "text" required = "" /> </ form> <form id = "form-2"> <input id = "input -2 "type =" text "/> </ form> <script> document.getElementById ( 'form-1'). checkValidity (); // false document.getElementById ( 'input-1'). CheckValidity (); // false document.getElementById ( 'form-2'). CheckValidity (); // true document.getElementById ( 'input-2'). CheckValidity (); // true </ script>Крім того, коли кожен раз, дії елемента форми validity (перевірити) за допомогою checkValidity і не вдалося, invalid (недійсні) події викликається для цього вузла. На прикладі коду вище, якщо ви хочете запустити кожен раз, вузол з ідентифікатором input-1 був перевірений і дані недійсні, зміст можна використовувати наступні:
document.getElementById ( 'input-1'). addEventListener ( 'invalid', function () {// ...}, false);Існує випадок no valid, але ви можете використовувати подія змін для повідомлення про те, коли поле дії змінено.
if (document.getElementById ( 'password1'). value! = document.getElementById ( 'password2'). value) {document.getElementById ( 'password1'). setCustomValidity ( 'Passwords must match.'); } Else {document.getElementById ( 'password1'). SetCustomValidity ( ''); }SetCustomValidity ()
Метод SetCustomValidity змінює властивості ValidationMessage, а також дозволяє додавати власні правила перевірки. Тому що установка ValidationMessage проходить з нового рядка зазначає поля дійсними і попутно будь-яка інша рядок відзначається недійсною. На жаль, немає способу установки ValidationMessage, також не змінюючи дійсність поля. Наприклад, якщо у вас є два поля для паролів, які працювали однаково, можна використовувати наступні:
if (document.getElementById ( 'password1'). value! = document.getElementById ( 'password2'). value) {document.getElementById ( 'password1'). setCustomValidity ( 'Passwords must match.'); } Else {document.getElementById ( 'password1'). SetCustomValidity ( ''); }атрибути HTML
Ми вже бачили, що maxlength, min, max, step, pattern, і type атрибути, використовувані браузером для обмеження даних. Для обмеження перевірки є два додаткові відповідні атрибути - novalidate і formnovalidate.
Novalidate
Атрибут Novalidate, може бути застосований до форми. При наявності цього атрибута означає, що дані форми не повинні перевірятися.
<Form novalidate = ""> <input type = "text" required = "" /> <input type = "submit" value = "Відправити" /> </ form>Formnovalidate
Логічний атрибут formnovalidate може бути застосований до вузлів кнопки і входу, щоб запобігти уявлення. наприклад:
<Form> <input type = "text" required = "" /> <input type = "submit" value = "Перевірка" /> <input type = "submit" formnovalidate = "" value = "Неможливо перевіряти" /> < / form>Якщо натиснути кнопку «Перевірка», обробка форми будуть зупинена через порожнього введення. А якщо натиснути кнопку «Не перевіряти», форма буде оброблятися незважаючи на неправильні дані через атрибута formnovalidate.
CSS
CSS додасть ефекти форми перевірки, навіть відображення помилки введення в потрібному місці.
: Valid,: invalid
У підтримці браузерів: valid pseudoselector будуть відповідати елементи форми, які відповідають зазначеним обмеженням, а також: invalid pseudoselector буде збігаються з тими, які цього не роблять.
<Form> <input id = "foo" type = "text" required = "" /> <input id = "bar" type = "text" /> </ form> <script> document.querySelectorAll ( 'input [type = "text"]: invalid '); // Matches input # foo document.querySelectorAll ( 'input [type = "text"]: valid'); // Matches input # bar </ script>Зробити стилі за замовчуванням
За замовчуванням Firefox ставить box-shadow і IE10 місцями червоний outline (контур) на: invalid (неправильні) поля.
Firefox 15
Відображення поля помилки в Firefox 15 Internet Explorer 10
Відображення поля помилки в Internet Explorer 10 У браузерах WebKit на основі опери нічого міняти не треба. Якщо ви хочете однаково для всіх браузерів, потрібно додати цей код в CSS.
: Invalid {box-shadow: none; / * FF * / outline: 0; / * IE 10 * /}