JavaScript 表单中的密码验证答案

【问题标题】：Password Validation in a Form in JavaScriptJavaScript 表单中的密码验证
【发布时间】：2018-07-14 18:22:39
【问题描述】：

我正在创建一个密码函数，其中密码必须包含数字、符号以及大小写字母。但是，当我尝试输入代码来验证这一点时，似乎没有任何效果。我有警报让用户知道他们的密码是否少于 8 个字符，他们的确认密码是否与第一个密码输入不匹配，以及他们是否没有输入确认密码。我希望保持同样的风格。

我有一段代码无法显示小写字母代码。我尝试了不同的部分，但实际上似乎没有任何效果。

window.onload = function() {

    var subButton = document.getElementById("submit");
   subButton.onclick = function value(passForm) {

   }

};



function value(passForm) {

    /** This function is being used to find out the values input by the user in both the password and confirm password text boxes.
     * The results are fed back to the user using alerts.
     * **/

   //confirm passwords match and have been created
    if ((passForm.passInput.value) == (passForm.confirmPassInput.value)) {
        alert("Your password has been created!");

    } else {

        var lower = /(?=.*[a-z])/;
        if (!lower(passForm.passInput.value)) {
            alert("Password must contain at least one lower case letter.");
            passForm.passInput.focus();
            return false;
        }
        else
        //Validating length
        if ((passForm.passInput.value).length < 8) {
            alert("Your password has less than 8 characters.");
            passForm.passInput.focus();
            return false;
        }

        else
        //Validating confirmation input
        if (passForm.confirmPassInput.value == "") {
            alert("Please confirm your password.");
            passForm.passInput.focus();
            return false;
        }
        else
        //Validationg confirmation matches
        if (passForm.confirmPassInput.value != passForm.passInput.value) {
            alert("Your confirmation password does not match.");
            passForm.passInput.focus();
            return false;
        }

        return true;

    }
    };

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/security.js"></script>
    <title>E-Commerce Security Features</title>
</head>
<body>
<heading>
    <h1>E-Commerce Security Practices</h1>
    <p id="heading"></p>
</heading>

<h3> Welcome to the E-Commerce Security Practices page! Here you will complete a few <i>simple</i> website security procedures and then decide
    what practice worked best and easiest for you. </br> Have fun!</h3>
<form name="passForm" method="post" onsubmit="return value (this)">
<p>In the section below, you are asked to create a username and a password in order to 'login'. </br> Your password <b>must</b> include 8 or more
characters, an upper and lower case letter and a number and a symbol. If your password does not include any of these requirements, it will not be accepted.</p>
Your Password: <input type="password" name="passInput" placeholder="Password" /> 
</br>
    Confirm Password: <input type="password" name="confirmPassInput" placeholder="Re-Enter Password"/>
<input type="submit" value="Submit" id="submit" onclick="return value (passForm) ;"/>
</form>
</body>
</html>

【问题讨论】：

输出是什么？
请注意，这不是一种可接受的密码验证方式。
您用于小写搜索的正则表达式似乎有点矫枉过正/[a-z]/ 也许......
@weirdpanda 输出只是密码确认消息，如果它全部大写
@AbbeyMoxen 我在下面添加了一个解决方案，如果您需要我进一步解释，请告诉我。谢谢！

标签： javascript html validation passwords

【解决方案1】：

如果密码匹配，它将跳过整个 else 块：

 //confirm passwords match and have been created
    if ((passForm.passInput.value) == (passForm.confirmPassInput.value)) {
        alert("Your password has been created!");

    } else {
       //you are doing validation here.

您需要运行多项检查：

window.onload = function() {

    var subButton = document.getElementById("submit");
   subButton.onclick = function value(passForm) {

   }

};



function value(passForm) {

    /** This function is being used to find out the values input by the user in both the password and confirm password text boxes.
     * The results are fed back to the user using alerts.
     * **/

   //check for lower case
        if (!passForm.passInput.value.match(/[a-z]/)) {
            alert("Password must contain at least one lower case letter.");
            passForm.passInput.focus();
            return false;
        }
        
        //Validating length
        if ((passForm.passInput.value).length < 8) {
            alert("Your password has less than 8 characters.");
            passForm.passInput.focus();
            return false;
        }
        
        //Validationg confirmation matches
        if (passForm.confirmPassInput.value != passForm.passInput.value) {
            alert("Your confirmation password does not match.");
            passForm.passInput.focus();
            return false;
        }
   
   //Validating confirmation input
        if (passForm.confirmPassInput.value == "") {
            alert("Please confirm your password.");
            passForm.passInput.focus();
            return false;
        }
   
   //check for upper ase
        if (!passForm.passInput.value.match(/[A-Z]/)) {
            alert("Password must contain at least one upper case letter.");
            passForm.passInput.focus();
            return false;
        }
        
           //check for number
        if (!passForm.passInput.value.match(/\d+/g)) {
            alert("Password must contain at least one number.");
            passForm.passInput.focus();
            return false;
        }
        
   
   //confirm passwords match and have been created
    if ((passForm.passInput.value) == (passForm.confirmPassInput.value)) {
        alert("Your password has been created!");
 return true;
    }
       

    };

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/security.js"></script>
    <title>E-Commerce Security Features</title>
</head>
<body>
<heading>
    <h1>E-Commerce Security Practices</h1>
    <p id="heading"></p>
</heading>

<h3> Welcome to the E-Commerce Security Practices page! Here you will complete a few <i>simple</i> website security procedures and then decide
    what practice worked best and easiest for you. </br> Have fun!</h3>
<form name="passForm" method="post" onsubmit="return value (this)">
<p>In the section below, you are asked to create a username and a password in order to 'login'. </br> Your password <b>must</b> include 8 or more
characters, an upper and lower case letter and a number and a symbol. If your password does not include any of these requirements, it will not be accepted.</p>
Your Password: <input type="password" name="passInput" placeholder="Password" /> 
</br>
    Confirm Password: <input type="password" name="confirmPassInput" placeholder="Re-Enter Password"/>
<input type="submit" value="Submit" id="submit" onclick="return value (passForm) ;"/>
</form>
</body>
</html>

【讨论】：

很遗憾，这不起作用。仅使用密码“ollie123”我就没有收到任何消息，甚至没有确认消息。不过谢谢！
@AbbeyMoxen 嗯，你在运行代码 sn-p 吗？我输入 ollie123，它会提示输入大写。
是的，在 sn-p 中它正在工作，但由于某种原因，当我将它放入网络风暴时，它不接受任何东西
这将得出结论该代码正在运行，但在您的环境中它的某些内容却不是。您应该更新您的问题以包含所有信息。
@AbbeyMoxen 您是否在本地构建中包含了 javascript CDN？是否缺少任何未在帖子中的代码？

【解决方案2】：

我猜你需要使用正则表达式看起来像

 (/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/)

最少八个字符，至少一个字母、一个数字和一个特殊字符：

 "^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$""^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"

最少八个字符，至少一个大写字母，一个小写字母，一个数字和一个特殊字符：

"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}"

最少 8 个字符，最多 10 个字符，至少 1 个大写字母、1 个小写字母、1 个数字和 1 个特殊字符：

"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,10}"

【讨论】：