Обзор проверки формы 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:
Таким образом, мы имеем очень простую веб-форму вместе с одним полем ввода данных как «Имя». Обратите внимание, что мы использовали обязательное ключевое слово в элементе тега input.
Выход :
Попробуем отправить форму, не вводя никакого значения в поле имени. После отправки вы получите сообщение об ошибке «Пожалуйста, заполните это поле», и форма не будет отправлена.
Вывод с пустыми данными
Таким образом, можно видеть, что сообщение об ошибке не добавляется нами и предоставляется самим HTML.
Как и обязательный атрибут, предоставляемый HTML, существуют различные теги формы, которые доступны для использования. Ниже приведен список некоторых тегов проверки формы,
- minlength: используется для установки требуемой минимальной длины элемента
- maxlength: используется для установки необходимой максимальной длины элемента
- шаблон: используется для определения регулярного выражения
2. Использование JavaScript
JavaScript широко используется для проверки формы HTML, поскольку он предоставляет больше способов настройки и установки правил проверки, а также некоторые теги, представленные в HTML5, не поддерживаются в более старых версиях Internet Explorer. JavaScript давно используется для проверки формы.
В основном, при проверке формы JavaScript мы определяем функции для проверки данных перед их отправкой на сервер. Мы можем реализовать любую логику, необходимую для достижения правил валидации. JavaScript более гибок в этом отношении, потому что нет ограничений на определение правил. Но для реализации этого необходимо знание JavaScript по сравнению с проверкой формы с использованием встроенных тегов.
Давайте посмотрим на пример проверки формы с использованием JavaScript. Мы реализуем тот же пример формы с одним входом в качестве элемента name.
Пример:
.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». Вместо этого мы добавили один тег onsubmit в элемент формы. Как упоминалось ранее, мы будем писать функцию проверки, для которой добавлен тег.
Мы написали функцию с именем validateForm (), которая будет выполнять проверку. Мы реализуем то же правило проверки, являются ли введенные данные в поле имени пустыми или нет. Логика для проверки этого заключается в нажатии на кнопку отправки, эта функция будет вызвана, и введенное значение будет проверено, является ли оно пустым или пустым. Функция вернет true в случае, если данные не являются нулевыми или пустыми, но если данные пустые или нулевые, то сообщение об ошибке отображается пользователю.
Выход
Если мы попытаемся отправить форму без ввода каких-либо данных, мы должны получить сообщение об ошибке на экране. Как видно из примера, мы разработали сообщение об ошибке таким же образом, как это возможно.
Вывод с пустыми данными
Заключение - проверка формы HTML
Итак, мы увидели очень простой пример проверки формы на стороне клиента. В основном, есть два способа проверки HTML-форм. Во-первых, используется встроенная функциональность HTML5, а во-вторых, JavaScript. Используя первый метод, нам не нужно писать дополнительный код.
Рекомендуемые статьи
Это было руководство по проверке формы HTML. Здесь мы обсудим обзор и два способа проверки HTML-форм, с помощью которых они могут быть выполнены. Вы также можете взглянуть на следующие статьи, чтобы узнать больше -
- HTML события
- Версии HTML
- Элементы HTML5
- Приложения HTML