Проверка клиентской формы с использованием ванильного JavaScript

Вступление

Большинство веб-приложений в настоящее время потребуют от вас заполнения формы в какой-то момент, будь то приложение онлайн-банкинга или служба потоковой передачи музыки.

А поскольку конечным пользователям никогда нельзя доверять, нам нужно защитить наше приложение от ошибок, чтобы оно обнаруживало, когда введенные данные неверны, и возвращало их пользователю с соответствующим сообщением (об ошибке).

Проверка формы - это метод, используемый для предотвращения предоставления пользователями данных, не соответствующих требованиям приложения. Примером может быть проверка того, что предоставленный пароль содержит хотя бы один символ верхнего регистра и число. Вы можете проверять данные на стороне сервера или на стороне клиента.

Проверка на стороне сервера - это идея проверки данных пользователя после их отправки на серверы. Если данные не в ожидаемом формате, они отправляются обратно пользователю.

С другой стороны, проверка на стороне клиента влечет за собой проверку данных, введенных пользователем в браузере, перед их отправкой на сервер. Как правило, это более эффективно, чем проверка на стороне сервера, поскольку предотвращает двусторонний переход от клиента к серверу и обратно. Это также ранний фильтр, который гарантирует, что правильные данные проходят, вместо того, чтобы иметь дело с неправильными данными после их прохождения.

Это не означает, что на сервере не должно быть проверки данных - сейчас мы просто просматриваем их сначала.

В этом руководстве мы обсудим, как мы можем проверить данные в браузере с помощью ванильного JavaScript.

Создание формы

Создадим простую форму регистрации, которая будет состоять из следующих полей:

username
first-password - используется для проверки исходного пароля по определенным критериям
second-password - используется в качестве подтверждения и удостоверяется, что пользователь не допустил опечатки в поле first-password .

... и поместите его в наш файл index.html

 <!DOCTYPE html> 
 <html lang="en"> 
 <head> 
 <meta charset="UTF-8" /> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
 <script defer src="validate.js"></script> 
 
 <title>Form Validation</title> 
 </head> 
 <body> 
 <h1>Form Validation Using JavaScript</h1> 
 
 <form id="form" action="/" method="GET"> 
 <!-- We are only interested in client-side validation now --> 
 
 <!-- All the fields are required --> 
 <div> 
 <label for="username">Username: </label> 
 <input type="text" name="username" id="username" autofocus required /> 
 </div> 
 
 <div> 
 <label for="first-password">Password: </label> 
 <input 
 type="password" 
 name="firstPassword" 
 id="first-password" 
 required 
 /> 
 </div> 
 
 <div> 
 <label for="second-password">Confirm Password: </label> 
 <input 
 type="password" 
 name="secondPassword" 
 id="second-password" 
 required 
 /> 
 </div> 
 
 <button type="submit">Submit</button> 
 </form> 
 
 <div id="show-error">No validation error yet!</div> 
 <!--We will use this div to display validation error --> 
 </body> 
 </html>

Этот HTML-файл будет отображать простую форму, которая выглядит следующим образом:

{.ezlazyload}

Требования к форме

Прежде чем писать какой-либо код, давайте сначала рассмотрим список необходимых нам проверок:

Убедитесь, что имя пользователя начинается с заглавной буквы.
Имя пользователя должно содержать хотя бы одну цифру.
Убедитесь, что длина пароля составляет от 8 до 20 символов.
Убедитесь, что пароль содержит хотя бы одну заглавную букву.
Подтвердите совпадение двух паролей

В случае, если вводимые пользователем данные не соответствуют приведенным выше требованиям, мы хотим:

Текст последнего div изменить
Запретить отправку формы

Настраивать

Во-первых, давайте создадим файл сценария validate.js и свяжем его с нашим index.html внутри нашего тега head

 <script defer src="validate.js"></script>

Затем давайте перейдем к соответствующим полям документа:

 // To disable the form from submitting 
 const form = document.querySelector('#form'); 
 // To display the error message 
 const errorDiv = document.querySelector('#show-error'); 
 // To validate the username 
 const username = document.querySelector('#username'); 
 // To validate the password 
 const firstPassword = document.querySelector('#first-password'); 
 // To confirm the password 
 const secondPassword = document.querySelector('#second-password');

Для простоты давайте сделаем так, чтобы проверка формы запускалась только после нажатия submit , а не в режиме реального времени:

 form.addEventListener('submit', (error) => { 
 // All validation checks are run in this method. 
 }

Реализация валидаторов

Первая буква имени пользователя - заглавная.

Это довольно очевидно, если первая буква строки такая же, как и ее вариант в верхнем регистре, это означает, что username фактически начинается с буквы в верхнем регистре:

 // We will inlcude any and all errors in this string 
 let incorrectInput = ''; 
 
 const firstLetter = username.value[0]; 
 
 // Return true if first letter is uppercase 
 const firstLetterIsUpperCase = (firstLetter === firstLetter.toUpperCase()); 
 
 if (!firstLetterIsUpperCase) { 
 incorrectInput += ' The first letter of username must be uppercase.\n'; 
 }

Имя пользователя содержит хотя бы одну цифру

/\d/ - это шаблон регулярного выражения, который соответствует одной цифре, то есть, если он соответствует хотя бы один раз внутри предоставленного имени пользователя, имя пользователя содержит цифру:

 // Regex to see if a digit is in the username, returns true if there is 
 const usernameIncludesDigit = /\d/.test(username.value); 
 
 if (!usernameIncludesDigit) { 
 incorrectInput += 'Username must include at least one digit.\n'; 
 }

Пароль от 8 до 20 символов.

length должен дать нам количество символов в пароле. Простое условное выражение должно помочь:

 const badPasswordLength = (firstPassword.value.length < 8 || firstPassword.value.length > 20); 
 
 if (badPasswordLength) { 
 incorrectInput += ' The password should be within 8 to 20 characters.\n'; 
 }

Пароль содержит хотя бы один символ верхнего регистра

Это похоже на то, что мы сделали для имени пользователя. Нам просто нужно изменить регулярное выражение, чтобы проверять наличие прописных букв вместо цифр:

 // Regex to see if a digit is in the username, returns true if there is 
 const passwordIncludesUppercase = /[az]/.test(firstPassword.value); 
 
 if (!passwordIncludesUppercase) { 
 incorrectInput += ' The password should contain at least one uppercase character.\n'; 
 }

Убедитесь, что два пароля совпадают

Наконец, нам нужно сравнить firstPassword и secondPassword чтобы увидеть, совпадают ли они:

 if (firstPassword.value !== secondPassword.value) { 
 incorrectInput += 'The passwords do not match.\n'; 
 }

Отображение сообщений об ошибках

После всех этих проверок, если какое-либо условие не выполнено, incorrectInput не будет пустой строкой и будет содержать проблему, поднятую в этом условном блоке.

В этом случае мы изменим текст в errorDiv чтобы наши ошибки отображались красным цветом:

 if (incorrectInput !== "") { 
 // Change the error div tag to display the error message(s) 
 errorDiv.innerText = incorrectInput; 
 // Change the color of the text to red 
 errorDiv.style.color = 'red'; 
 // Prevent the form button from submitting again, before fixing the issues 
 error.preventDefault(); 
 }

Тестирование кода

А теперь давайте протестируем нашу новую форму со следующим вводом:

Имя пользователя: johndoe
Пароль: 42
Подтвердите пароль: 421

Что должно дать следующие результаты: