Оценка текстового поля во время ввода

Question

Оценка текстового поля во время ввода

0

В настоящее время я пытаюсь написать небольшой код HTML/JavaScript, который будет анализировать поле пароля, чтобы убедиться, что он имеет обязательные символы при вводе. Здесь JSFiddle для визуальной ссылки.

Я хочу, чтобы, когда требуемый символ вводится в поле пароля, соответствующий текст становится зеленым. Но когда я печатаю в поле, текст остается красным. Кажется, я не могу найти то, что я сделал неправильно. Что-то не так с моим JavaScript?

И вот мой код в одном файле:

<!DOCTYPE html>
<html>

<head>
    <title>hw5</title>
    <style>
        p {
            color:red;
            position:absolute;
            left:250px;
            top:95px;
            text-align:right
        }
    </style>
</head>

<body>
    <h1>HW5</h1>


    <label for="username">Username:</label>
    <input style="margin-left:2px" type="text" name="username" id="username" />
    <br/>

    <label for="password">Password:</label>
    <input style="margin-left:6px" type="password" name="password" id="password" />
    <br/>


    <p id="lower">must have one lower</p>
    <p style="top:115px" id="upper">must have one upper</p>
    <p style="top:135px" id="number">must have one number</p>
    <p style="top:155px" id="punct">must have one punct</p>

    <script>
        var pass = document.getElementById('password');
        var upper = document.getElementById('upper');
        var lower = document.getElementById('lower');
        var number = document.getElementById('number');
        var punct = document.getElementById('punct');

        $(document).ready(function() {
            $('#password').keyup(checkPassword);
        });

        function checkPassword() {
            var pass = $('#password').val();


            if (pass.search(/[A-Z]/)) {
                upper.style.color = "green";
            } else upper.style.color = "red";

            if (pass.search(/[a-z]/)) {
                lower.style.color = "green";
            } else lower.style.color = "red";

            if (pass.search(/\d/)) {
                number.style.color = "green";
            } else number.style.color = "red";

            if (pass.search(/[!\@\#\$\%\^\&\*\(\)\_\+]/)) {
                punct.style.color = "green";
            } else punct.style.color = "red";
        }
    </script>

</body>

</html>

Yani 19 март 2014, в 01:36

Источник

0

@cookiemonster извини, понял, что я пропустил основную часть. Я редактировал это в.
user1727668 19 март 2014, в 00:09
1

@ bjb568: в ОП уже есть скрипка. Я не думаю, что функция checkPassword выполняется.
Robert Harvey♦ 19 март 2014, в 00:13
0

Частично проблема заключается в том, что вы вызываете функцию checkPassword вместо ее передачи. $('#password').keyup(checkPassword()); Бросить () .
cookie monster 19 март 2014, в 00:15
0

... другая часть заключается в том, что .search() возвращает индекс на основе 0. Если ничего не найдено, он вернет -1 , что является истинным значением. jsfiddle.net/wQny9/1
cookie monster 19 март 2014, в 00:17
0

@cookiemonster Спасибо! Хотя, кажется, это не работает, когда я изменил это в своем файле и открыл его в своем браузере.
user1727668 19 март 2014, в 00:28
0

В вашем jsFiddle у вас не было загружено jQuery. Убедитесь, что он загружен в ваш фактический файл. В противном случае, мы не сможем узнать, что не так в вашем файле, не увидев его.
cookie monster 19 март 2014, в 00:32
0

@cookiemonster Понял. Я думаю, я совсем не понимал JQuery. Это работает сейчас, хотя после того, как я осмотрелся еще немного. Спасибо за помощь!
user1727668 19 март 2014, в 00:44
0

Да, это просто библиотека предварительно написанного кода JavaScript. Рад, что смог помочь.
cookie monster 19 март 2014, в 00:48

Показать ещё 6 комментариев

Теги:

javascript

html

1 ответ

Ещё вопросы

@cookiemonster извини, понял, что я пропустил основную часть. Я редактировал это в.
@ bjb568: в ОП уже есть скрипка. Я не думаю, что функция checkPassword выполняется.
Частично проблема заключается в том, что вы вызываете функцию checkPassword вместо ее передачи. $('#password').keyup(checkPassword()); Бросить () .
... другая часть заключается в том, что .search() возвращает индекс на основе 0. Если ничего не найдено, он вернет -1 , что является истинным значением. jsfiddle.net/wQny9/1
@cookiemonster Спасибо! Хотя, кажется, это не работает, когда я изменил это в своем файле и открыл его в своем браузере.
В вашем jsFiddle у вас не было загружено jQuery. Убедитесь, что он загружен в ваш фактический файл. В противном случае, мы не сможем узнать, что не так в вашем файле, не увидев его.
@cookiemonster Понял. Я думаю, я совсем не понимал JQuery. Это работает сейчас, хотя после того, как я осмотрелся еще немного. Спасибо за помощь!
Да, это просто библиотека предварительно написанного кода JavaScript. Рад, что смог помочь.

Yani · Accepted Answer · 2014-03-18T21-18-00.000Z

Функция поиска по Javascript возвращает позицию, а не TRUE или FALSE.

Это означает, что ваше сравнение терпит неудачу, когда символы найдены в позиции 0...

Также измените обработку событий, так как ваша не будет работать.

Это должно работать (не протестировав RegExp, хотя).

$(document).ready(function () {

    $('#password').keyup(function() {

       var pass = $('#password').val();

       if (pass.search(/[A-Z]/) != -1) {
            upper.style.color = "green";
        } else upper.style.color = "red";

        if (pass.search(/[a-z]/) != -1) {
            lower.style.color = "green";
        } else lower.style.color = "red";

        if (pass.search(/\d/) != -1) {
            number.style.color = "green";
        } else number.style.color = "red";

        if (pass.search(/[!\@\#\$\%\^\&\*\(\)\_\+]/) != -1) {
            punct.style.color = "green";
        } else punct.style.color = "red";

    });
});

Кроме того, если вы хотите использовать более чистый код, вы можете использовать:

 $(document).ready(function () {

        $('#password').keyup(function() {

           var pass = $('#password').val();  

           upper.style.color = (pass.search(/[A-Z]/) != -1) ? 'green' : 'red';
           lower.style.color = (pass.search(/[a-z]/) != -1) ? 'green' : 'red';
           number.style.color = (pass.search(/\d/) != -1) ? 'green' : 'red';
           punct.style.color = (pass.search(/[!\@\#\$\%\^\&\*\(\)\_\+]/) != -1) ? 'green' : 'red';

        });
    });

JSFiddle

Надеюсь это поможет.