Проверка формы – основная и самая важная часть процесса веб-разработки. Обычно проверка формы выполняется на стороне сервера. Проверка формы помогает отображать сообщения об ошибках для пользователя, если есть какие-либо ненужные или неправильные данные, или если обязательное поле остается пустым. Если сервер обнаруживает какую-либо ошибку, он возвращает эту ошибку; затем мы показываем пользователю сообщение об ошибке. Но мы можем использовать javascript в интерфейсе, чтобы проверить данные формы и сразу показать ошибки. В этой статье мы изучим основную проверку формы в javascript. Итак, давайте сразу перейдем к примерам и посмотрим, как это сделать в javascript.
Примеры
Прежде всего, мы предполагаем форму с именем «testForm», в которой у нас есть поле ввода с меткой «Имя пользователя», а тип ввода отправляется в наш HTML-файл. В теге формы мы создали событие onsubmit, в котором мы закрываем и возвращаем функцию validateFunc () .
<form action="" method="get" name="testForm" onsubmit="return(validationFunc())"> <label for="name">Имя</label> <input type="text" name="name"><br><input type="submit" value="Submit"> </form>
В файле сценария мы напишем определение функции validateFunc(), которая будет выполняться каждый раз, когда пользователь нажимает кнопку отправки. В этой функции мы проверим поле ввода имени пользователя. Мы предполагаем, что хотим проверить, пусто ли поле имени пользователя или нет, когда пользователь нажимает кнопку отправки.
Итак, чтобы проверить поле имени пользователя. Сначала мы назначаем переменную document.testForm, чтобы код выглядел чистым и понятным. Затем в определении функции мы напишем код для проверки. Мы напишем оператор if, чтобы проверить пустое поле формы. Если поле имени пользователя пусто, мы покажем окно предупреждения, чтобы показать ошибку, снова сфокусируемся на поле имени пользователя и вернем false, чтобы форма не была отправлена. В противном случае, если он пройдет проверку и данные будут проверены, мы вернем true функции.
var theForm = document.testForm;
// Код проверки формы
function validationFunc() {
if (theForm.name.value == "") {
alert( "пустое имя" );
theForm.name.focus();
return false;
}
return (true);
}
После написания всего этого кода. Если мы запустим код и нажмем кнопку отправки, ничего не написав в поле формы.
Как вы можете видеть на скриншоте ниже, в окне предупреждения возникает ошибка.
Это очень простой, но хороший пример для начала реализации проверки формы. Для дальнейшей реализации, например, проверки нескольких форм или если вы хотите проверить длину символа.
Для этой цели мы сначала предполагаем два поля формы в теге формы с метками «электронная почта» и «пароль» в нашем HTML-файле.
<form action="" method="get" name="testForm" onsubmit="return(validationFunc())"> <label for="name">Имя</label> <input type="text" name="name"><br><label for="email">Электронная почта</label> <input type="email" name="email" id=""><br><label for="password">Пароль</label> <input type="password" name="password" id=""><br><br> <input type="submit" value="Submit"> </form>
Для проверки в javascript мы снова добавим оператор if для проверки полей формы электронной почты и пароля в определение функции файла сценария. Предположим, мы хотим применить несколько проверок к полю электронной почты, например, поле не должно быть пустым, а его длина не должна быть меньше 10 символов. Итак, мы можем использовать OR «||» в операторе if. Если возникнет какая-либо из этих ошибок, отобразится окно предупреждения с сообщением об ошибке, которое мы хотим показать, сфокусируемся на поле формы электронной почты и вернем false функции. Точно так же, если мы хотим применить проверку длины символа в поле пароля, мы можем это сделать.
var theForm = document.testForm;
// Код проверки формы
function validationFunc() {
if (theForm.name.value == "") {
alert( "пустое имя" );
theForm.name.focus();
return false;
}
if (theForm.email.value == "" || theForm.email.value.length < 10) {
alert( "Пустая почта" );
theForm.email.focus();
return false;
}
if (theForm.password.value.length < 6) {
alert( "Пароль должен быть длиной 6 символов" );
theForm.password.focus();
return false;
}
return (true);
}
После написания всего этого кода перезагрузите страницу, чтобы обновить код. Теперь либо оставим пустое поле электронной почты, либо напишем письмо длиной менее 10 символов. В обоих случаях будет отображаться сообщение об ошибке «Неправильный адрес электронной почты».
Итак, вот как мы можем применить базовую проверку формы в JavaScript. Мы также можем применить проверку данных на стороне клиента с помощью Regex или написав нашу собственную функцию. Предположим, мы хотим применить проверку данных к полю электронной почты. Регулярное выражение будет таким для проверки электронной почты.
if (/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.
test(theForm.email.value)) {
alert( "Неправильная почта" );
theForm.email.focus() ;
return false;
}
Это была просто базовая демонстрация проверки данных с использованием регулярного выражения.
Вывод
В этой статье рассматривается базовая проверка формы в javascript. Мы также попробовали и прокрались в проверке данных с помощью регулярного выражения.