Question

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

＆＃13;

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);

＆＃13;

<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>

＆＃13;

似乎我想念一些东西，但我已经无法整天找到它了 - 任何想法都会受到赞赏！

Answer 1

为了工作，必须把它放在底部。

Answer 2

验证应该返回验证状态，并且表单的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>

Answer 3

如果密码相同或不相同，您可以显示代码。但是，没有任何代码可以控制如何使用无效密码处理提交。

以下是两个选项：

1）<form onSubmit>，如Pankaj的回答所述。

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

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

中添加ID

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

JavaScript密码和密码确认匹配

3 个答案: