添加密码验证后，表单验证不起作用
[英]Form validation not working after adding password validation
问题描述
我正在学习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>
2 个解决方案
解决方案1
0 2015-09-27 17:46:09
你这里有错字
form.Name.value.length
没有 名称为“ 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>";
}
有用。
解决方案2
0 已采纳 2015-09-28 00:52:42
我对密码字段的验证超过了X个字符，并且我的单独函数正在验证password1和password2匹配，这似乎是一个问题。
在测试期间，我删除了密码最小长度的验证，其余的表单验证与密码匹配功能一起使用。
有趣。
密码验证在登录表单中不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.