我遇到了一个非常奇怪的问题，尽管我研究了其他多个线程，但所有发布的解决方案都没有用。基本上，我有一个脚本来验证密码和确认密码字段，如下所示：
function validatePasswords() {
var password = document.getElementById("password").value;
var password_confirm = document.getElementById("confirmPassword").value;
var retval = true;
if (password != password_confirm) {
alert("Your passwords do not match.");
document.getElementById("password").style.borderColor = "#E34234";
document.getElementById("confirmPassword").style.borderColor = "#E34234";
retval = false;
}
return retval;
}<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="css/my-style.css">
<link href="https://fonts.googleapis.com/css?family=Bentham" rel="stylesheet" />
<link rel="icon" href="/images/icon.png" />
<script type="text/javascript" src="js/validate_passwords.js" async></script>
<title>Create Account</title>
</head>
<body>
<form class="my-itemizedForm" action="createAccount.php" method="post" onsubmit="return validatePasswords()" id="accountForm">
<br>
<p class="form-header">
Enter your information below:
</p>
<div align="center">
<input type="text" id="username" placeholder="EID" maxlength="10" required>
<br>
<br>
<input type="text" id="firstName" placeholder="First Name" minLength="2" maxlength="30" required>
<br>
<br>
<input type="text" id="lastName" placeholder="Last Name" minLength="2" maxlength="30" required>
<br>
<br>
<input type="text" id="phone" placeholder="Phone Number" minlength="10" maxlength="10" required>
<br>
<br>
<input type="text" id="email" placeholder="E-mail" minLength="7" maxlength="40" required>
<br>
<br>
<input type="text" id="password" placeholder="Password" minLength="3" maxlength="40" required>
<br>
<br>
<input type="text" id="confirmPassword" placeholder="Confirm Password" minLength="3" maxlength="40" required>
<br>
<br>
<input class="my-submitButton" type="submit" id="createAccount" value="Create Account">
<br>
<br>
</div>
</form>
</body>
我知道我的脚本已正确链接到文档，因为我有另一个脚本，当将其提交给onsubmit时，它将阻止表单提交：
function stop(){
return false;
}
鉴于stop（）可以，为什么我的验证脚本不起作用？我是javascript的新手，而Web开发则相对较新，所以这可能是一个简单的错误，但我似乎找不到。
答案 0 :(得分：2)
我建议对您的代码进行以下更新，以便通过传递的validatePasswords()对象将event方法绑定到您的特定表单实例。
此外，我将更新密码输入元素以包括类属性，以便您可以为正在验证的当前表单选择输入字段（而不是可能从页面中的其他位置选择密码输入字段）。
最后，如果验证失败，您还可以在preventDefault()对象上使用event方法来阻止表单提交：
function validatePasswords(event) {
// Query password inputs via currentTarget (this form)
var password = event.currentTarget.querySelector(".password").value;
var password_confirm = event.currentTarget.querySelector(".confirmPassword").value;
if (password != password_confirm) {
alert("Your passwords do not match.");
document.getElementById("password").style.borderColor = "#E34234";
document.getElementById("confirmPassword").style.borderColor = "#E34234";
// If validation fails, prevent submit
event.preventDefault();
}
}<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="css/my-style.css">
<link href="https://fonts.googleapis.com/css?family=Bentham" rel="stylesheet" />
<link rel="icon" href="/images/icon.png" />
<script type="text/javascript" src="js/validate_passwords.js" async></script>
<title>Create Account</title>
</head>
<body>
<form class="my-itemizedForm" action="createAccount.php" method="post" onsubmit="validatePasswords(event)" id="accountForm">
<br>
<p class="form-header">
Enter your information below:
</p>
<div align="center">
<input type="text" id="username" placeholder="EID" maxlength="10" required>
<br>
<br>
<input type="text" id="firstName" placeholder="First Name" minLength="2" maxlength="30" required>
<br>
<br>
<input type="text" id="lastName" placeholder="Last Name" minLength="2" maxlength="30" required>
<br>
<br>
<input type="text" id="phone" placeholder="Phone Number" minlength="10" maxlength="10" required>
<br>
<br>
<input type="text" id="email" placeholder="E-mail" minLength="7" maxlength="40" required>
<br>
<br>
<!-- Add class here -->
<input type="password" id="password" class="password" placeholder="Password" minLength="3" maxlength="40" required>
<br>
<br>
<!-- Add class here -->
<input type="password" id="confirmPassword" class="confirmPassword" placeholder="Confirm Password" minLength="3" maxlength="40" required>
<br>
<br>
<input class="my-submitButton" type="submit" id="createAccount" value="Create Account">
<br>
<br>
</div>
</form>
</body>
答案 1 :(得分：0)
我相信我已经弄清楚了，我不完全确定为什么现在可以工作，但是问题是我需要在密码字段上输入名称和id标记，就像这样：
<form class="my-itemizedForm" action="createAccount.php" method="post" onsubmit="return validatePasswords()" id="accountForm">
<div class="createAccountField">
<input type="password" id="password" name="password" placeholder="Password" minLength="3" maxlength="40" required>
<br>
<br>
<input type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm Password" minLength="3" maxlength="40" required>
<br>
<br>
</div>
<input class="my-submitButton" type="submit" name="createAccount" value="Create Account">
<br>
<br>
</div>
</form>
这是我正在使用的javascript：
function validatePasswords(){
var password = document.getElementById("password").value;
var password_confirm = document.getElementById("confirmPassword").value;
if(password != password_confirm){
alert("Your passwords do not match.");
document.getElementById("password").style.borderColor = "#E34234";
document.getElementById("confirmPassword").style.borderColor = "#E34234";
event.preventDefault();
return false;
}
else{
return true;
}
}
如果有人知道为什么该实现相对于其他实现有效，那么我很想知道。