Преглед на валидирането на 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, има различни маркери за форми, които са достъпни за използване. По-долу е списъкът на някои маркери за валидиране на формуляри,

  • минимална дължина : Използва се за задаване на необходимата минимална дължина на елемент
  • maxlength: Използва се за задаване на необходимата максимална дължина на елемент
  • шаблон: Използва се за определяне на редовен израз

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;
)
)

От предишния пример премахнахме необходимия маркер от елемента на име „име“. Вместо това добавихме един маркер onsubmit във формата на елемента. Както бе споменато по-горе, ние ще пишем функция за валидиране, за който е добавен маркер.

Ние написахме функция, наречена validateForm (), която ще извърши валидирането. Ние прилагаме същото правило за проверка дали въведените данни в полето за име са празни или не. Логиката за проверка на това става при натискане на бутона за изпращане, тази функция ще бъде извикана и въведената стойност ще бъде проверена дали е нула или е празно. Функцията ще се върне вярно в случай, че данните не са нули или празни, но ако данните са празни или нулеви, тогава съобщението за грешка се показва на потребителя.

продукция

Ако се опитаме да изпратим формуляра, без да въвеждаме никакви данни, трябва да получим съобщението за грешка на екрана. Както се вижда от примера, че сме проектирали съобщението за грешка по същия възможен начин.

Изход с празни данни

Заключение - валидиране на HTML формуляр

Така че видяхме много прост пример за валидиране на формуляра от страна на клиента. Основно има два начина за провеждане на валидиране на HTML формуляри. Първо е използването на вградената функционалност, предоставена в HTML5, и второ - чрез използване на JavaScript. Използвайки първия метод, не е необходимо да пишем допълнителен код.

Препоръчителни статии

Това е ръководство за валидиране на HTML формуляри. Тук обсъждаме преглед и два начина за валидиране на HTML формуляри, чрез които те могат да бъдат изпълнени. Може да разгледате и следните статии, за да научите повече -

  1. HTML събития
  2. Версии на Html
  3. HTML5 елементи
  4. Приложения на HTML

Категория:

Инструменти за уеб разработка