添加密码验证后表单验证不工作

Form validation not working after adding password validation

本文关键字：验证 工作 表单 密码 添加      更新时间：2023-09-26

我正在学习JavaScript，并致力于form validation。我有一个简单的表单，它要求填写几个不同的字段。

我有我的表单验证工作。然后我添加了一个函数来检查密码字段是否匹配。这也会在用户输入时进行检查。第二个函数工作得很好，但现在我的表单验证的其余部分都停止工作了。

如果你能帮我的话，我将不胜感激。

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title>Marty the Robot | About</title>
    <link rel="stylesheet" type="text/css" href="css/source.css">
    <link rel="stylesheet" type="text/css" href="css/form.css">
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,500,300,900' rel='stylesheet' type='text/css'>
    <script src="js/script.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-1.7.1.min.js""></script>
</head>
<body>
<main>
<div class="signupform-container">

 <div id="form-title">
      <h2>
           Create an account
      </h2>
 </div>
<form method="post" action="" id="submitForm">
    <div id="validation"></div>
    <div id="field1-container" class="field-container">
    <label>Name<br>
    <div class="space">
    </div>
    <input type="text" name="FName" placeholder="enter your first name"></label>
    </div>
    <div id="field2-container" class="field-container">
    <label>Last Name<br>
    <div class="space">
    </div>
    <input type="text" name="LName" placeholder="enter your last name"></label>
    </div>
    <div id="field3-container" class="field-container">
    <label>Email<br>
    <div class="space">
    </div>    
    <input type="text" name="Email" placeholder="email@email.com"></label>
    </div>
    <div id="field4-container" class="field-container">
    <label>Username<br>
    <div class="space">
    </div>    
    <input type="text" name="Username" placeholder="enter a username"></label>
    </div>
    <div id="field5-container" class="field-container">
    <label>Password<br>
    <input type="password" id="txtNewPassword" placeholder="enter a password" />
    </div>
    <div id="field6-container" class="field-container">
    <label>Password<br>
    <input type="password" id="txtConfirmPassword" placeholder="enter your password again" onChange="checkPasswordMatch();" />
    </div>
    <div id="field7-container" class="field-container">
    <div class="registrationFormAlert" id="divCheckPasswordMatch">
    </div>

    <div class="registrationFormAlert" id="divCheckPasswordMatch">
    <div id="form-submit">
    <input type="submit" value="Make it so">
    </div>
</form>
<script>
    function Validate(form) {
    var errors = "";
    if (form.Name.value.length === 0) {
        form.Name.style.border = "1px solid red";
        form.Name.style.backgroundColor = "#FFCCCC";
        errors += "<li>Please enter your first name</li>";
    }
    if (form.LName.value.length === 0) {
        form.LName.style.border = "1px solid red";
        form.LName.style.backgroundColor = "#FFCCCC";
        errors += "<li>Please enter your last name</li>";
    }
    if (form.Username.value.length === 0) {
        form.Username.style.border = "1px solid red";
        form.Username.style.backgroundColor = "#FFCCCC";
        errors += "<li>Please enter a username</li>";
    }        
    if (form.Email.value.length === 0) {
        form.Email.style.border = "1px solid red";
        form.Email.style.backgroundColor = "#FFCCCC";
        errors += "<li>Please enter an email address</li>";
    }
    if (form.Password1.value.length <= 4) {
        form.Password1.style.border = "1px solid red";
        form.Password1.style.backgroundColor = "#FFCCCC";
        errors += "<li>Your password is not long enough</li>";
    }
    if (errors.length > 0) {
        document.getElementById("validation").innerHTML = "<ul>" + errors + "</ul>";
        return false;
    }
return true;
}
document.getElementById("submitForm").onsubmit = function () {
return Validate(this);
};
</script>
<script>
function checkPasswordMatch() {
var password = $("#password").val();
var confirmPassword = $("#confirmpassword").val();
if (password !== confirmPassword)
    $("#divCheckPasswordMatch").html("Passwords do not match!");
else
    $("#divCheckPasswordMatch").html("Passwords match.");
}
$(document).ready(function () {
$("#txtConfirmPassword").keyup(checkPasswordMatch);
});

</script>
</div>
</main>
</body>
</html>

验证代码

<script>
function Validate(form) {
    var errors = "";
    if (form.FName.value.length === 0) {
        form.FName.style.border = "1px solid red";
        form.FName.style.backgroundColor = "#FFCCCC";
        errors += "<li>Please enter your first name</li>";
    }
    if (form.LName.value.length === 0) {
        form.LName.style.border = "1px solid red";
        form.LName.style.backgroundColor = "#FFCCCC";
        errors += "<li>Please enter your last name</li>";
    }
    if (form.Username.value.length === 0) {
        form.Username.style.border = "1px solid red";
        form.Username.style.backgroundColor = "#FFCCCC";
        errors += "<li>Please enter a username</li>";
    }        
    if (form.Email.value.length === 0) {
        form.Email.style.border = "1px solid red";
        form.Email.style.backgroundColor = "#FFCCCC";
        errors += "<li>Please enter an email address</li>";
    }
    if (form.Password1.value.length <= 4) {
        form.Password1.style.border = "1px solid red";
        form.Password1.style.backgroundColor = "#FFCCCC";
        errors += "<li>Your password is not long enough</li>";
    }
    if (errors.length > 0) {
        document.getElementById("validation").innerHTML = "<ul>" + errors + "</ul>";
        return false;
    }
return true;
}
document.getElementById("submitForm").onsubmit = function () {
return Validate(this);
};
</script>
<script>
function checkPasswordMatch() {
var password = $("#password").val();
var confirmPassword = $("#confirmpassword").val();
if (password !== confirmPassword)
    $("#divCheckPasswordMatch").html("Passwords do not match!");
else
    $("#divCheckPasswordMatch").html("Passwords match.");
}
$(document).ready(function () {
$("#txtConfirmPassword").keyup(checkPasswordMatch);
});

</script>
https://jsfiddle.net/martylavender/n0tb7n4e/

你这里打错字了

form.Name.value.length

, 是输入与 name ="name"

改成:

form.FName.value.length

: 

if (form.FName.value.length === 0) {
    form.FName.style.border = "1px solid red";
    form.FName.style.backgroundColor = "#FFCCCC";
    errors += "<li>Please enter your first name</li>";
}

。

看起来这是一个问题，我的验证密码字段超过X个字符，我的单独的函数是验证password1和password2匹配。

在测试期间，我删除了密码最小长度的验证，其余的表单验证与密码匹配函数一起工作。

有趣。

相关文章：