Phenquestions
Проверка формы - основная и самая важная часть процесса веб-разработки. Обычно проверка формы выполняется на стороне сервера. Проверка формы помогает отображать сообщения об ошибках пользователю, если есть какие-либо ненужные или неправильные данные, или если обязательное поле остается пустым. Если сервер обнаруживает какую-либо ошибку, он возвращает эту ошибку; затем мы показываем пользователю сообщение об ошибке. Но мы можем использовать javascript во внешнем интерфейсе, чтобы проверить данные формы и сразу показать ошибки. В этой статье мы изучим базовую проверку формы в javascript. Итак, давайте сразу перейдем к примерам и посмотрим, как мы можем это сделать в javascript.
Примеры
Прежде всего, мы предполагаем форму с именем «testForm», в которой у нас есть поле ввода с меткой «Имя пользователя», а тип ввода отправляется в наш HTML-файл. В теге формы мы создали событие onsubmit, в котором мы закрываем и возвращаем функцию validateFunc ().
В файле сценария мы напишем определение функции validateFunc (), которая будет выполняться каждый раз, когда пользователь нажимает кнопку отправки. В этой функции мы проверим поле ввода имени пользователя. Мы предполагаем, что мы хотим проверить, пусто ли поле имени пользователя или нет, когда пользователь нажимает кнопку отправки.
Итак, чтобы проверить поле имени пользователя. Сначала мы назначаем переменную документу.testForm, просто чтобы дать чистый и понятный вид коду. Затем в определении функции мы напишем код для проверки. Мы напишем оператор if, чтобы проверить пустое поле формы. Если поле имени пользователя пусто, мы покажем окно предупреждения, чтобы показать ошибку, снова сфокусируемся на поле имени пользователя и вернем false, чтобы форма не была отправлена. В противном случае, если он пройдет проверку и данные будут проверены, мы вернем true функции.
var theForm = документ.testForm;// Код проверки формы
function validationFunc ()
если (форма.название.value == "")
alert ("имя пусто");
форма.название.фокус ();
вернуть ложь;
возврат (истина);
После написания всего этого кода. Если мы запустим код и нажмем кнопку отправки, ничего не написав в поле формы.
Как вы можете видеть на скриншоте ниже, он выдает ошибку в окне предупреждения.
Это очень простой, но хороший пример для начала реализации проверки формы. Для дальнейшей реализации, например, проверки нескольких форм или если вы хотите проверить длину символа.
Для этого мы сначала предполагаем два поля формы в теге формы с метками «электронная почта» и «пароль» в нашем HTML-файле.
Для проверки в javascript мы снова добавим оператор if для проверки полей формы электронной почты и пароля в определение функции файла сценария. Предположим, мы хотим применить несколько проверок к полю электронной почты, например, поле не должно быть пустым, а его длина не должна быть меньше 10 символов. Итак, мы можем использовать OR «||» в заявлении if. Если произойдет какая-либо из этих ошибок, отобразится окно предупреждения с сообщением об ошибке, которое мы хотим показать, сфокусируемся на поле формы электронной почты и вернем false функции. Точно так же, если мы хотим применить проверку длины символа в поле пароля, мы можем сделать это.
var theForm = документ.testForm;// Код проверки формы
function validationFunc ()
если (форма.название.value == "")
alert ("имя пусто");
форма.название.фокус ();
вернуть ложь;
если (форма.электронное письмо.значение == "" || форма.электронное письмо.значение.длина < 10)
alert («Электронная почта неуместна»);
форма.электронное письмо.фокус ();
вернуть ложь;
если (форма.пароль.значение.длина < 6)
alert («Пароль должен состоять из 6 символов»);
форма.пароль.фокус ();
вернуть ложь;
возврат (истина);
После написания всего этого кода перезагрузите страницу, чтобы обновить код. Теперь либо оставим пустое поле электронной почты, либо напишем письмо длиной менее 10 символов. В обоих случаях будет отображаться сообщение об ошибке «Неправильный адрес электронной почты».
Итак, вот как мы можем применить базовую проверку формы в JavaScript. Мы также можем применить проверку данных на стороне клиента с помощью Regex или написав нашу собственную функцию. Предположим, мы хотим применить проверку данных в поле электронной почты. Регулярное выражение будет таким для проверки электронной почты.
если (/ ^ [a-zA-Z0-9.!# $% & '* + / =?^ _ '| ~ -] [адрес электронной почты защищен] [a-zA-Z0-9 -] + (?: \.[a-zA-Z0-9 -] +) * $ /.test (theForm.электронное письмо.значение))
alert («Электронная почта неуместна»);
форма.электронное письмо.фокус ();
вернуть ложь;
Это была просто базовая демонстрация проверки данных с использованием регулярного выражения. Но небо открыто для вас, чтобы летать.
Заключение
В этой статье рассматривается базовая проверка формы в javascript. Мы также попробовали и прокрались в проверке данных с помощью регулярного выражения. Если вы хотите узнать больше о регулярных выражениях, у нас есть специальная статья, посвященная регулярным выражениям в linuxhint.ком. Для изучения и понимания концепций javascript и более полезного контента, подобного этому, продолжайте посещать linuxhint.ком. Спасибо!
