Проверка заполнения формы с помощью jQuery и JavaScript


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

demo
Обработка поля для проверки правильного ввода имени, включает в себя проверку на количество символов в поле. Если символов меньше 1, то выводится сообщение с просьбой правильно ввести имя. Это сделано специально, т.к. значение поля «Ваше имя» может быть длиной в 2 символа. Например фамилия «Ли». Также мы не исключали из этого поля цифры, т.к. имя может быть «Людовик 12» :)

// Функция срабатывает по событию .blur
    $('#userName').blur(function(){
        // Убираем все классы с поля «Ваше имя»
        $('#userName').removeClass();
        // Определяем длину значения поля
        var nameLngth = $('#userName').val().length;

        // Если значение меньше или равно 1 символу, то выводим предупреждение
        if(nameLngth <= 1){
            $('#userName').addClass('notValid');
            $(this).next().text('Введите пожалуйста ваше имя');
        } else {
        // Здесь мы пишем что должно быть, если все введено верно
            $('#userName').addClass('valid');
            $(this).next().text('');
        }
    });

Обработка поля для проверки правильного ввода номера телефона, включает в себя проверку на длину номера телефона (в номере телефона должно быть не менее 6 цифр), так и на наличие посторонних символов. В случае неправильного заполнения поля, выводятся предупреждения.

// Функция срабатывает по событию .blur
    $('#phoneNumber').blur(function(){
        // Убираем все классы с поля «Ваш номер телефона»
        $('#phoneNumber').removeClass();
        // Берем значение поля «Ваш номер телефона»
        var phoneV = $('#phoneNumber').val();
        // Определяем длину значения поля
        var phoneLngth = phoneV.length;

        // Проверяем чтобы в поле были только цифры
        if( /[^0-9]/.test(phoneV) ) {
            $('#phoneNumber').addClass('notValid');
            $(this).next().text('Номер телефона должен содержать только цифры');
        } else if (phoneLngth <= 5) {
        // Проверяем чтобы длина номера телефона была не меньше 6 символов
            $('#phoneNumber').addClass('notValid');
            $(this).next().text('Введите пожалуйста ваш номер телефона');
        } else {
        // Здесь мы пишем что должно быть, если все введено верно
            $('#phoneNumber').addClass('valid');
            $(this).next().text('');
        }
    });

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

// Функция срабатывает по событию .blur
    $('#userEmail').blur(function checkMail(){
        // Убираем все классы с поля «Ваш e-mail»
        $('#userEmail').removeClass();
        // Берем значение поля «Ваш e-mail»
        var emailV = $('#userEmail').val();
        // Задаем регулярное выражение которое проверит наш e-mail
        var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,6})+$/;

        // Проверяем верно ли введен e-mail
        if (filter.test(emailV)) {
            $('#userEmail').addClass('valid');
            $(this).next().text('');
        } else {
        // Здесь мы пишем что должно быть, если e-mail введен неверно
            $('#userEmail').addClass('notValid');
            $(this).next().text('Введите пожалуйста правильно ваш e-mail');
        }
    });

Полное представление этой формы вы можете посмотреть нажав на кнопку «Демо», в самом начале статьи.

3 thoughts on “Проверка заполнения формы с помощью jQuery и JavaScript

    1. Спасибо за ваше мнение.
      6 символов указано потому, что есть такие доменные имена как .travel

Comments are closed.