Валидация формы на стороне клиента с помощью Vanilla 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-файле будет отображаться простая форма, которая выглядит следующим образом:

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

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

Убедитесь, что имя пользователя начинается с заглавной буквы
Имя пользователя должно содержать как минимум одну цифру
Убедитесь, что длина пароля составляет от 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');

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

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

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

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

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

// 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 = /[a-z]/.test(firstPassword.value); 

if (!passwordIncludesUppercase) {
    incorrectInput += ' The password should contain at least one uppercase character.\n';
}

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

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

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

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

Заключение

В этой статье мы использовали ванильный JavaScript для проверки простой HTML-формы.

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

Оригинал: “https://stackabuse.com/client-side-form-validation-using-vanilla-javascript/”