javascript - 如何对密码输入进行强验证并验证确认密码输入

Question

我有一些 HTML 和 Javascript，要求用户按照以下规则输入密码:

1. 长度至少为 8 个字符
2. 至少 1 个大写字母
3. 至少 1 个小写字母
4. 至少 1 个特殊字符
5. 至少 1 个数字字符

接下来是密码确认条目。密码和密码确认输入下面有一些 div block ，其中包含 p 标签中包含的错误消息，当发生任何错误时，这些消息应该会变得可见。好像不起作用。

我还在这个 CSHTML 文件中使用 C# Razor 代码，因此我需要在字符串中使用“@@”而不是 @。如果我的说法有误，请告诉我。

密码:(必须包含至少 1 个小写字母、1 个大写字母、1 个特殊字符、1 个数字字符且长度至少为 8 个字符)

        <input type="password" name="password_admin1_create" oninput="return validate_password()"><br><br>
        <script>
            var password = document.getElementsByName("password_admin1_create")[0];
            function validatePassword(val) {
                var strongRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@@#\$%\^&\*])(?=.{8,})/;
                console.log(re.test(val))
                return strongRegex.test(val);
            }

            function validate_password() {
                if (validatePassword(password.value)) {
                    document.getElementById("password_result_invalid").style.visibility = "hidden";
                    document.getElementById("password_result_invalid").style.height = "0";
                } else {
                    document.getElementById("password_result_invalid").style.visibility = "visible";
                    document.getElementById("password_result_invalid").style.height = "initial";
                }
            }
        </script>
        <div id="password_result_invalid" class="error_verify">
            <p style="color:red">Invalid password format.</p>
        </div>

        <p>Please confirm the password:</p>
        <input type="password" name="password_admin1_create_confirm" oninput="return validate_password_confirm()"><br><br>
        <script>
            var password_confirm = document.getElementsByName("password_admin1_create_confirm")[0].value;
            var password = document.getElementsByName("password_admin1_create")[0].value;

            function validate_password_confirm() {
                if (password_confirm == password) {
                    document.getElementById("password_confirmation_invalid").style.visibility = "hidden";
                    document.getElementById("password_confirmation_invalid").style.height = "0";
                } else {
                    document.getElementById("password_confirmation_invalid").style.visibility = "visible";
                    document.getElementById("password_confirmation_invalid").style.height = "initial";
                }
            }
        </script>
        <div id="password_confirmation_invalid" class="error_verify">
            <p style="color:red">Passwords do not match.</p>
        </div>

Answer 1

这是我几周前做的。只是发布它，看看它是否可以帮助你(我知道这不是最干净的)

HTML

所有要求均如上所示，最初为红色。

<div class="requirements">
    <ul>
        <li id="length" class="red">Include at least 8 digits and three special characters</li>
        <li id="uppercase" class="red">Include at least one upper case characters (A-Z)</li>
        <li id="lowercase" class="red">Include at least one lower case character (a-z)</li>
        <li id="numbers" class="red">Include a number (0-9)</li>
        <li id="symbols" class="red">Include a symbol (!, #, $, etc.)</li>
    </ul>
</div>

JS

将按键事件处理程序添加到当前页面上的输入字段:

var inputfields = document.forms["changePasswordForm"].getElementsByTagName("input");
for (var i = 0; i < inputfields.length; i++){
    inputfields[i].addEventListener('keyup', function(e){
        // On every key up, check the password
        var password = document.getElementById('sf_guard_user_password');
        validatePassword(password.value);
    })
}

最后我的(丑陋的)验证密码功能

function validatePassword(password) {

                // Minimum 8 characters
                if (password.length > 7) {
                    document.getElementById('length').classList.remove('red');
                    document.getElementById('length').classList.add('green');
                } else {
                    document.getElementById('length').classList.remove('green');
                    document.getElementById('length').classList.add('red');
                }

                // At least one uppercase
                if (/[A-Z]/.test(password)) {
                    document.getElementById('uppercase').classList.remove('red');
                    document.getElementById('uppercase').classList.add('green');
                } else {
                    document.getElementById('uppercase').classList.remove('green');
                    document.getElementById('uppercase').classList.add('red');
                }

                // At least one lowercase
                if (/[a-z]/.test(password)) {
                    document.getElementById('lowercase').classList.remove('red');
                    document.getElementById('lowercase').classList.add('green');
                } else {
                    document.getElementById('lowercase').classList.remove('green');
                    document.getElementById('lowercase').classList.add('red');
                }

                // At least one number
                if (/[0-9]/.test(password)) {
                    document.getElementById('numbers').classList.remove('red');
                    document.getElementById('numbers').classList.add('green');
                } else {
                    document.getElementById('numbers').classList.remove('green');
                    document.getElementById('numbers').classList.add('red');
                }

                // At least one symbol
                if (/[$@$!%*#?&]/.test(password)) {
                    document.getElementById('symbols').classList.remove('red');
                    document.getElementById('symbols').classList.add('green');
                } else {
                    document.getElementById('symbols').classList.remove('green');
                    document.getElementById('symbols').classList.add('red');
                }

            }

最后我检查提交是否满足所有要求:

document.getElementById('changePasswordForm').addEventListener('submit',  function(e){
    e.preventDefault();
    // Once again ugly because length is fixed
    if (document.getElementsByClassName('green').length > 4) {
        document.getElementById('changePasswordForm').submit();
    }
})

不知道这对你有没有帮助。但我尝试过:)