JavaScript密码和密码确认匹配

JavaScript password and password confirmation match

本文关键字：密码 JavaScript 确认      更新时间：2023-09-26

在单击Submit之前，我无法匹配密码。即使密码不同，提交也会进行。

var pass1 = document.getElementById('userPassword');
var pass2 = document.getElementById('userRepeatPassword');
function validatePassword(){
	if (pass2.value == pass1.value) {
		pass2.setCustomValidity('');
	} else {
		pass2.setCustomValidity('Both passwords do not match');
	}
}
pass1.addEventListener('change', validatePassword);
pass2.addEventListener('keyup', validatePassword);
<form method="POST" action="login.php">
<div class="form-group">
	<label for="inputFirstName">First name:</label>
	<input type="text" class="form-control" name="firstName" id="inputFirstName" required>
</div>
<div class="form-group">
	<label for="inputLastName">Last name:</label>
	<input type="text" class="form-control" name="lastName" id="inputLastName" required>
</div>
<div class="form-group">
	<label for="inputEmail">Email address:</label>
	<input type="email" class="form-control" name="email" id="inputEmail" required>
</div>
<div class="form-group">
	<label for="inputPassword">Password:</label>
	<input type="password" class="form-control" name="userPassword" id="userPassword" required>
</div>
<div class="form-group">
	<label for="inputRepeatPassword">Password repeat:</label>
	<input type="password" class="form-control" name="userRepeatPassword" id="userRepeatPassword" required>
</div>
<div class="form-actions">
	<button type="submit" class="btn btn-primary btn-block" style="background-color: #c2c2c2; color: black; font-weight: bold;">Submit</button>
</div>
</form>

好像我错过了什么，但我已经不能找到它一整天-任何想法将不胜感激!

validate应该返回验证状态，并且表单的onsubmit事件处理程序应该能够做出反应。下面是示例:

var pass1 = document.getElementById('userPassword');
var pass2 = document.getElementById('userRepeatPassword');
function validatePassword() {
  var status = false;
  if (pass2.value == pass1.value) {
    status = true;
    pass2.setCustomValidity('');
  } else {
    pass2.setCustomValidity('Both passwords do not match');
  }
  return status;
}
pass1.addEventListener('change', validatePassword);
pass2.addEventListener('keyup', validatePassword);
<form method="POST" action="login.php" onsubmit="return validatePassword();">
  <div class="form-group">
    <label for="inputFirstName">First name:</label>
    <input type="text" class="form-control" name="firstName" id="inputFirstName" required>
  </div>
  <div class="form-group">
    <label for="inputLastName">Last name:</label>
    <input type="text" class="form-control" name="lastName" id="inputLastName" required>
  </div>
  <div class="form-group">
    <label for="inputEmail">Email address:</label>
    <input type="email" class="form-control" name="email" id="inputEmail" required>
  </div>
  <div class="form-group">
    <label for="inputPassword">Password:</label>
    <input type="password" class="form-control" name="userPassword" id="userPassword" required>
  </div>
  <div class="form-group">
    <label for="inputRepeatPassword">Password repeat:</label>
    <input type="password" class="form-control" name="userRepeatPassword" id="userRepeatPassword" required>
  </div>
  <div class="form-actions">
    <button type="submit" class="btn btn-primary btn-block" style="background-color: #c2c2c2; color: black; font-weight: bold;">Submit</button>
  </div>
</form>

有代码显示密码是否相同。但是，没有任何代码来控制如何处理带有无效密码的提交。

这里有两个选项:

1) Pankaj的回答中描述的<form onSubmit>。

2)你也可以让你的验证功能禁用你的提交按钮。

(添加id到您的提交<button type="submit" id=submitBtn class="btn btn-primary btn-block" style="background-color: #c2c2c2; color: black; font-weight: bold;">Submit</button>

)
function validatePassword(){
    var submit = document.getElementById('submitBtn');
    if (pass2.value == pass1.value) {
        pass2.setCustomValidity('');
        submit.disabled = false;
    } else {
        pass2.setCustomValidity('Both passwords do not match');
        submit.disabled = true;
    }
}

必须放在底部，才能起作用

相关文章：