Question

我目前正在尝试编写一些HTML / JavaScript代码来分析密码字段，以确保在输入时具有所需的字符。 Here's a JSFiddle for a visual reference

我想要发生的是，当在密码字段中输入所需字符时，相应的文本变为绿色。但是当我输入字段时，文本保持红色。我似乎无法找到我做错了什么。我的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>

Answer 1

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

希望这有帮助。

在键入时评估文本字段

1 个答案: