flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180beget banner 468x60beget banner 728x90beget banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180

Руководство по валидации форм в JavaScript

Веб-формы стали неотъемлемой частью веб-приложений. Они часто используется для сбора такой информации о пользователе, как имя, адрес электронной почты, местоположение, возраст и т. д. Но вполне возможно, что какой-то пользователь может ввести данные не в том формате, в котором вы ожидаете.

Чтобы сэкономить время и избежать ненужной нагрузки на ресурсы вашего сервера, вы можете проверить данные формы на стороне клиента (то есть в системе пользователя), используя JavaScript, прежде чем передавать их на веб-сервер для дальнейшей обработки.

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

В этом разделе мы более подробно рассмотрим, как выполнять валидацию форм на JavaScript и обрабатывать любые ошибки ввода.

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

Проверка формы с помощью JavaScript

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

Что ж, давайте посмотрим как это работает.

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

Давайте сначала создадим простую HTML-форму, которую мы будем проверять на стороне клиента, используя JavaScript, когда пользователь нажимает кнопку отправки (submit). Для этого создадим HTML-файл с именем application-form.html и поместим в него следующий код, а затем сохраним его где-нибудь в вашей системе.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple HTML Form</title>
    <link rel="stylesheet" href="style.css">
    <script src="validator.js"></script>
</head>
<body>
<form name="contactForm" onsubmit="return validateForm()" action="confirmation.php" method="post">
    <h2>Форма заявки</h2>
    <div class="row">
        <label>Имя</label>
        <input type="text" name="name">
        <div class="error" id="nameErr"></div>
    </div>
    <div class="row">
        <label>Email</label>
        <input type="text" name="email">
        <div class="error" id="emailErr"></div>
    </div>
    <div class="row">
        <label>Номер телефона</label>
        <input type="text" name="mobile" maxlength="10">
        <div class="error" id="mobileErr"></div>
    </div>
    <div class="row">
        <label>Страна</label>
        <select name="country">
            <option>Select</option>
            <option>Australia</option>
            <option>India</option>
            <option>United States</option>
            <option>United Kingdom</option>
        </select> 
        <div class="error" id="countryErr"></div>
    </div>
    <div class="row">
        <label>Пол</label>
        <div class="form-inline">
            <label><input type="radio" name="gender" value="male">Мужской</label>
            <label><input type="radio" name="gender" value="female">Женский</label> 
        </div>
        <div class="error" id="genderErr"></div>
    </div>
    <div class="row">
        <label>Хобби <i>(не обязательно)</i></label>
        <div class="form-inline">
            <label><input type="checkbox" name="hobbies[]" value="sports">Спорт</label>
            <label><input type="checkbox" name="hobbies[]" value="movies">Кино</label>
            <label><input type="checkbox" name="hobbies[]" value="music">Музыка</label>  
        </div>
    </div>        
    <div class="row">
        <input type="submit" value="Submit">
    </div>
</form>
</body>
</html>

Создание скрипта валидации формы

Теперь мы собираемся создать файл JavaScript, который содержит наш полный скрипт проверки.

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

// Определяем функции для отображения сообщения об ошибке
function printError(elemId, hintMsg) {
    document.getElementById(elemId).innerHTML = hintMsg;
}

// Определяем функции для проверки формы
function validateForm() {
    // Получение значений элементов формы
    var name = document.contactForm.name.value;
    var email = document.contactForm.email.value;
    var mobile = document.contactForm.mobile.value;
    var country = document.contactForm.country.value;
    var gender = document.contactForm.gender.value;
    var hobbies = [];
    var checkboxes = document.getElementsByName("hobbies[]");
    for(var i=0; i < checkboxes.length; i++) {
        if(checkboxes[i].checked) {
            // Заполняем массив хобби выбранными значениями
            hobbies.push(checkboxes[i].value);
        }
    }
    
    // Определяем переменные ошибок со значением по умолчанию
    var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
    
    // Проверяем имя
    if(name == "") {
        printError("nameErr", "Пожалуйста, введите ваше имя");
    } else {
        var regex = /^[a-zA-Z\s]+$/;                
        if(regex.test(name) === false) {
            printError("nameErr", "Пожалуйста, введите правильное имя");
        } else {
            printError("nameErr", "");
            nameErr = false;
        }
    }
    
    // Проверяем адрес электронной почты
    if(email == "") {
        printError("emailErr", "Пожалуйста, введите адрес вашей электронной почты");
    } else {
        // Регулярное выражение для базовой проверки электронной почты
        var regex = /^\S+@\S+\.\S+$/;
        if(regex.test(email) === false) {
            printError("emailErr", "Пожалуйста, введите действительный адрес электронной почты");
        } else{
            printError("emailErr", "");
            emailErr = false;
        }
    }
    
    // Проверяем номер мобильного телефона
    if(mobile == "") {
        printError("mobileErr", "Пожалуйста, введите номер вашего мобильного телефона");
    } else {
        var regex = /^[1-9]\d{9}$/;
        if(regex.test(mobile) === false) {
            printError("mobileErr", "Пожалуйста, введите действительный 10-значный номер мобильного телефона");
        } else{
            printError("mobileErr", "");
            mobileErr = false;
        }
    }
    
    // Проверяем страну
    if(country == "Select") {
        printError("countryErr", "Пожалуйста, выберите вашу страну");
    } else {
        printError("countryErr", "");
        countryErr = false;
    }
    
    // Проверяем пол
    if(gender == "") {
        printError("genderErr", "Пожалуйста, выберите ваш пол");
    } else {
        printError("genderErr", "");
        genderErr = false;
    }
    
    // Запрещаем отправку формы в случае ошибок
    if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) {
       return false;
    } else {
        // Создаем строки из входных данных для предварительного просмотра
        var dataPreview = "Вы ввели следующие данные: \n" +
                          "Имя: " + name + "\n" +
                          "Email: " + email + "\n" +
                          "Номер: " + mobile + "\n" +
                          "Страна: " + country + "\n" +
                          "Пол: " + gender + "\n";
        if(hobbies.length) {
            dataPreview += "Hobbies: " + hobbies.join(", ");
        }
        // Отображаем входные данные в диалоговом окне перед отправкой формы
        alert(dataPreview);
    }
};

Доступ к значению отдельного поля формы можно получить с помощью синтаксиса document.formName.fieldName.value или document.getElementsByName(name).value. Но, чтобы получить значения из поля формы, которое поддерживает множественный выбор, например, группу чекбоксов, вам нужно использовать оператор цикла, как показано в примере выше (строки с 14 по 21).

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

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

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

Добавление стилей для формы

Наконец, создайте файл с именем style.css и поместите в него следующий код, затем сохраните его также в том же месте, где вы сохранили два предыдущих файла. Это правила для визуального оформления нашей формы.

body {
    font-size: 16px;
    background: #f9f9f9;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
h2 {
    text-align: center;
    text-decoration: underline;
}
form {
    width: 300px;
    background: #fff;
    padding: 15px 40px 40px;
    border: 1px solid #ccc;
    margin: 50px auto 0;
    border-radius: 5px;
}
label {
    display: block;
    margin-bottom: 5px
}
label i {
    color: #999;
    font-size: 80%;
}
input, select {
    border: 1px solid #ccc;
    padding: 10px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 2px;
}
.row {
    padding-bottom: 10px;
}
.form-inline {
    border: 1px solid #ccc;
    padding: 8px 10px 4px;
    border-radius: 2px;
}
.form-inline label, .form-inline input {
    display: inline-block;
    width: auto;
    padding-right: 15px;
}
.error {
    color: red;
    font-size: 90%;
}
input[type="submit"] {
    font-size: 110%;
    font-weight: 100;
    background: #006dcc;
    border-color: #016BC1;
    box-shadow: 0 3px 0 #0165b6;
    color: #fff;
    margin-top: 10px;
    cursor: pointer;
}
input[type="submit"]:hover {
    background: #0165b6;
}

Теперь откройте файл application-form.html в веб-браузере и попробуйте заполнить некоторые данные и посмотреть, как скрипт реагирует на ввод недопустимых данных в поле формы.

Чтобы узнать о проверке на стороне сервера, ознакомьтесь с Руководством по валидации форм в PHP.

jivo banner 480x320jivo banner 728x90jivo banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600etxt banner 480x320etxt banner 728x90etxt banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 3.6 / 5. Количество оценок: 7

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…
Подробнее

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….
Подробнее

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…
Подробнее