В този учебник ще научите как да създадете уеб формуляри с ефективна клиентска валидация в JavaScript. Валидацията е от съществено значение, за да се уверите, че въведените от потребителя данни са правилни и пълни, преди да бъдат изпратени на сървъра. Ще обсъдим различни аспекти на валидацията, включително използването на атрибути на HTML5 както и прилагането на персонализирани валидационни логики в JavaScript.
Най-важните изводи
- Полетата за въвеждане могат частично да бъдат валидирани чрез атрибути на HTML5.
- JavaScript позволява дълбоко, персонализирано валидиране.
- Съобщенията за грешки могат да бъдат динамично оформяни, за да дадат полезни указания на потребителите.
По-към-по насоки
Стъпка 1: Създаване на основна структура на формуляра
Първоначално създайте прост HTML формуляр, който съдържа поле за въвеждане на изречение. Уверете се, че добавяте атрибута pattern за първичната валидация.
Стъпка 2: Проста валидация на шаблон
В HTML формуляра можете да използвате атрибута pattern, за да се уверите, че въведеното изречение завършва с точка. Опитайте да валидирате без JavaScript.
Стъпка 3: Добавяне на JavaScript
За да подобрите валидацията, вградете JavaScript. Можете да напишете скрипт, който взима въведеното поле и го валидира. Започнете като добавите Event Listener за събитието change.
Стъпка 4: Валидация с JavaScript
В JavaScript кода проверете дали въведената стойност наистина завършва с точка. Използвайте метода setCustomValidity, за да покажете персонализирани съобщения за грешка. Ако изречението не е валидно, покажете съответната обратна връзка.
Стъпка 5: Персонализиране на съобщенията за грешка
Направете съобщенията за грешка по-специфични. Използвайте event.target.value, за да видите какво е въвел потребителят, и адаптирайте динамично съобщението за грешка.
Стъпка 6: Вграждане на HTML5 валидационни метрики
Оптимизирайте формуляра си, като използвате вградените валидационни метрики на HTML5. Проверете дали вашето изречение отговаря и на атрибута pattern и комбинирайте го с вече съществуващата валидация в JavaScript.
Стъпка 7: Валидация за имейли
Добавете формуляра още едно поле за имейл адреси. Тук се използва типовата проверка на HTML5, но добавете също и персонализирано валидиране чрез JavaScript.
Стъпка 8: Оптимизиране на поведението при въвеждане
За да оптимизирате поведението при въвеждане за потребителите, превключете от change на input като Event Listener. Така въвеждането се валидира веднага, докато потребителят все още пише.
Стъпка 9: Динамични съобщения за грешки
Внедрете логика, която внася специфична динамика в съобщенията за грешка. Уведомете потребителя защо въвеждането му е отхвърлено и предложете съответните насоки.
Стъпка 10: Последна проверка
Проведете обстойна проверка. Тествайте формуляра с различни въвеждания и се уверете, че всички възможни случаи на грешки са обхванати.
Резюме
В този урок научихте как да осъществите прости, но ефективни валидации с JavaScript и HTML5 в уеб формуляри. Видяхте основите на валидацията чрез шаблон и персонализирана логика и как можете да дадете обратна връзка на потребителите за грешки при въвеждането, за да подобрите техния опит.
Често задавани въпроси
Как работи методът setCustomValidity?Методът setCustomValidity позволява задаването на персонализирано съобщение за грешка в полето за въвеждане, което се показва, когато валидацията не успее.
Каква е разликата между събитията 'change' и 'input'?Събитието 'input' се задейства всеки път, когато потребителят въвежда нещо в полето за въвеждане, докато събитието 'change' се задейства само след напускане на полето.
Как може да се провери валидността на поле за имейл?Използвайте функцията за съпоставяне на типове в HTML5, за да се уверите, че посочените имейл адреси са валидни формати и лесно да се показват съобщения за грешки при валидацията.
