Question

我正在学习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/

Answer 1

你这里有拼写错误

form.Name.value.length

名称=“姓名”

没有输入

将其更改为：

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>";
}

有效。

Answer 2

看起来我的验证密码字段超过X个字符以及验证密码1和密码2匹配的单独函数是个问题。

在测试期间，我删除了密码最小长度的验证，其余的表单验证与密码匹配功能一起使用。

有趣。

添加密码验证后，表单验证无效

2 个答案: