• Главная
>
• JQuery

Что такое "На лету"?

«На лету» - это момент, когда данные проверяются во время их ввода, то есть действие происходит в момент набора данных, а не после отправки формы. Это помогает предотвратить и показать ошибки в момент заполнения формы, а не после её отправки.

Основной пример: Простая проверка пароля

Теперь перейдем к тому, как с помощью jQuery можно проверить пароль "на лету". Самый простой вариант. Вы можете проверить пароль, используя код jQuery, подобный этому:

$(document).ready(function() {
    $('#password').on('input', function() {
        var password = $(this).val();
        if(password.length < 8) {
            $('#passwordError').text('Пароль слишком короткий.');
        } else {
            $('#passwordError').text('Пароль подходит.');
        }
    });
});

В этом коде, функция .on('input', function() {...}) следит за каждым изменением поля ввода для пароля (#password). При каждом обновлении поля проверка выполняется сразу. Если длина пароля (password.length) меньше 8 символов, соответствующее сообщение об ошибке выводится. Если пароль достаточно длинный, выводится подтверждающее сообщение.

Как сделать несколько проверок пароля

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

$(document).ready(function() {
    $('#password').on('input', function() {
        var password = $(this).val();
        if(!/[a-z]/.test(password)) {
            $('#passwordError').text('Пароль должен содержать хотя бы одну строчную букву.');
        } else if(!/[A-Z]/.test(password)) {
            $('#passwordError').text('Пароль должен содержать хотя бы одну заглавную букву.');
        } else if(!/[0-9]/.test(password)) {
            $('#passwordError').text('Пароль должен содержать хотя бы одну цифру.');
        } else if(!/[!@#$%^&*]/.test(password)) {
            $('#passwordError').text('Пароль должен содержать хотя бы один специальный символ.');
        } else {
            $('#passwordError').text('Пароль подходит.');
        }
    });
});

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

Как проверить совпадения паролей

Еще одна распространенная задача - проверка совпадения пароля и подтверждения пароля. Вот как это можно сделать с помощью jQuery:

$(document).ready(function() {
    $('#password, #confirmPassword').on('keyup', function() {
        if ($('#password').val() == $('#confirmPassword').val()) {
            $('#matchMessage').html('Пароли совпадают').css('color', 'green');
        } else 
            $('#matchMessage').html('Пароли не совпадают').css('color', 'red');
    });
});

В этом скрипте, после каждого нажатия клавиши в полях '#password' и '#confirmPassword', проверяется, соответствуют ли они друг другу. Сообщение об этом отображается в элементе '#matchMessage'.

Как итог

Эти примеры служат только как отправная точка и могут быть доработаны в соответствии с требованиями вашего проекта.