如何在不重新加载页面的情况下检查表单中的确认密码字段

Question

我有一个项目，我必须在其中添加一个注册表，并且想要在不单击“注册”按钮的情况下验证密码和确认字段是否相等。

如果密码和确认密码字段不匹配，那么我也想在确认密码字段的旁边放置一条错误消息，并禁用注册按钮。

以下是我的html代码。

<form id="form" name="form" method="post" action="registration.php"> 
    <label >username : 
<input name="username" id="username" type="text" /></label> <br>
    <label >password : 
<input name="password" id="password" type="password" /></label>     
    <label>confirm password:
<input type="password" name="confirm_password" id="confirm_password" />
    </label>
<label>
  <input type="submit" name="submit"  value="registration"  />
</label>

有什么办法吗？在此先感谢您的帮助。

Answer 1

我们将研究实现这一目标的两种方法。使用和不使用jQuery。

1.使用jQuery

您需要将添加KEYUP功能，您的密码和确认密码字段。原因是即使password字段更改，也应检查文本相等性。感谢@kdjernigan指出

这样，当您在字段中键入内容时，您将知道密码是否相同：

$('#password, #confirm_password').on('keyup', function () {
  if ($('#password').val() == $('#confirm_password').val()) {
    $('#message').html('Matching').css('color', 'green');
  } else 
    $('#message').html('Not Matching').css('color', 'red');
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>password :
  <input name="password" id="password" type="password" />
</label>
<br>
<label>confirm password:
  <input type="password" name="confirm_password" id="confirm_password" />
  <span id='message'></span>
</label>

这是小提琴：http :
//jsfiddle.net/aelor/F6sEv/325/

2.不使用jQuery

我们将在两个字段上使用javascript
的onkeyup事件来达到相同的效果。

var check = function() {
  if (document.getElementById('password').value ==
    document.getElementById('confirm_password').value) {
    document.getElementById('message').style.color = 'green';
    document.getElementById('message').innerHTML = 'matching';
  } else {
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'not matching';
  }
}


<label>password :
  <input name="password" id="password" type="password" onkeyup='check();' />
</label>
<br>
<label>confirm password:
  <input type="password" name="confirm_password" id="confirm_password"  onkeyup='check();' /> 
  <span id='message'></span>
</label>

这是小提琴：http :
//jsfiddle.net/aelor/F6sEv/324/