Огляд перевірки форми HTML
Веб-форми часто є найбільш часто використовуваною і найважливішою частиною веб-додатків. Перевірка форми - це процес перевірки даних, введених користувачем, за попередньо визначеними правилами. Перевірка форми може відбуватися як на стороні клієнта, так і на стороні сервера. Перевірка форми HTML - це форма перевірки на стороні клієнта, де перевірка даних буде виконуватися перед відправкою даних на сервер. Перевірка форми HTML є важливою та корисною, оскільки вона покращує користувальницький інтерфейс та продуктивність веб-програми.
Перевірка форми HTML
В основному існує два способи перевірки HTML-форми,
- Використання вбудованої функціональності HTML5
- Використання JavaScript
1. Використання вбудованої функціональності HTML5
HTML5 надає цю функцію перевірки форми без використання JavaScript. Елементи форми додадуть атрибути перевірки, які дозволять автоматично перевірити форму для нас. Атрибути перевірки дозволяють нам задавати різні види правил для елементів форми. Вони дозволяють нам встановити довжину даних, встановити обмеження на значення даних тощо.
Давайте подивимось на один простий приклад перевірки форми HTML за допомогою вбудованих елементів перевірки форми, а потім перейдемо далі до перевірки форми HTML за допомогою JavaScript.
Приклад
Перевірка форми за допомогою атрибута перевірки HTML5 - у цьому прикладі ми використовуємо необхідний тег перевірки форми, який спричинить обов’язкове введення даних у це поле, інакше форма не буде подана. Нижче наведено фрагмент коду для того ж, а також деякі стилі веб-форми.
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
Name:
Таким чином, у нас є дуже проста веб-форма разом із лише одним полем вхідних даних як "Ім'я". Зверніть увагу, що ми використовували необхідне ключове слово в елементі тегу введення.
Вихід :
Спробуємо подати форму, не вводячи значення в полі імені. Після надсилання ви отримаєте повідомлення про помилку як "Будь ласка, заповніть це поле", і форма не буде подана.
Виведення з порожніми даними
Тож видно, що повідомлення про помилку не додається нами, а надається самим HTML.
Як і потрібний атрибут, що надається HTML, доступні для використання різні теги форм. Нижче наведено список тегів перевірки форми,
- minlength: використовується для встановлення необхідної мінімальної довжини елемента
- Максимальна довжина : використовується для встановлення необхідної максимальної довжини елемента
- шаблон: використовується для визначення регулярного виразу
2. Використання JavaScript
JavaScript широко використовується для перевірки форми HTML, оскільки він надає більше способів налаштування та встановлення правил перевірки, також деякі теги, що надаються в HTML5, не підтримуються в старих версіях Internet Explorer. JavaScript тривалий час використовується для перевірки форми.
У валідації форми JavaScript, в основному, ми визначаємо функції для перевірки даних перед подачею на сервер. Ми можемо реалізувати будь-яку логіку, необхідну для досягнення правил перевірки. JavaScript таким чином є більш гнучким, оскільки немає обмежень у визначенні правил. Але необхідно мати знання JavaScript, щоб реалізувати це порівняно з валідацією форми за допомогою вбудованих тегів.
Давайте подивимось приклад перевірки форми за допомогою JavaScript. Ми будемо реалізовувати той же приклад форми з лише одним входом, як елемент імені.
Приклад:
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
position: absolute;
width: 100%;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
.errorMessage (
background-color: white;
width: 143px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 107px;
visibility: hidden;
border-radius: 10px;
position: relative;
float: left;
)
.errorMessage.top-arrow:after (
content: " ";
position: absolute;
right: 90px;
top: -15px;
border-top: none;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 15px solid white;
)
Name:
function validateForm() (
var nameVal = document.forms("simpleForm")("name").value;
if(nameVal == null || nameVal == "") (
document.getElementsByClassName( "errorMessage" )(0).style.visibility = "visible";
document.getElementsByClassName( "errorMessage" )(0).innerHTML = "Please Fill out this field";
return false;
) else (
return true;
)
)
З попереднього прикладу ми видалили потрібний тег із елемента форми "name". Натомість ми додали один тег підряд у елементі форми. Як було сказано раніше, ми будемо писати функцію для перевірки, для якої додано тег.
Ми написали функцію з назвою validateForm (), яка зробить перевірку. Ми реалізуємо те саме правило перевірки, чи введені дані в полі імені порожні чи ні. Логіка для перевірки цього відбувається при натисканні кнопки "Надіслати", ця функція буде викликана, і введене значення буде перевірено, чи воно є нульовим чи чи порожнім. Функція поверне істину у випадку, якщо дані є недійсними або порожніми, але якщо дані порожні або недійсні, тоді повідомлення про помилку відображається користувачеві.
Вихід
Якщо ми спробуємо подати форму, не вводячи жодних даних, нам слід отримати повідомлення про помилку на екрані. Як видно з прикладу, що ми створили повідомлення про помилку таким же чином.
Виведення з порожніми даними
Висновок - перевірка форми HTML
Тому ми побачили дуже простий приклад перевірки форми на стороні клієнта. В основному є два способи перевірки HTML-форми. По-перше, це використання вбудованої функції, що надається в HTML5, а друга - використання JavaScript. Використовуючи перший метод, нам не потрібно писати додатковий код.
Рекомендовані статті
Це керівництво щодо перевірки форми HTML. Тут ми обговорюємо огляд та два способи перевірки форм HTML, за допомогою яких їх можна виконати. Ви також можете переглянути наступні статті, щоб дізнатися більше -
- Події HTML
- Версії Html
- Елементи HTML5
- Застосування HTML