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


至少8个字符
至少1个大写字母
至少1个小写字母
至少1个特殊字符
至少1个数字字符


随后是密码确认条目。密码和密码确认输入下方包含div块,其中包含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>

最佳答案

您应该将“ pattern”属性分配给任何符合您密码要求的正则表达式。例如:

<  input type="password" id="psw" name="psw"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
required >


该链接可能也有帮助:https://www.w3schools.com/howto/howto_js_password_validation.asp

09-17 16:54
查看更多