添加密碼驗證后，表單驗證不起作用
[英]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.