密码和确认密码不匹配答案

【问题标题】：Password and confirm password don't match密码和确认密码不匹配
【发布时间】：2017-03-04 15:29:17
【问题描述】：

我有一个密码并确认密码字段，如下所示。enter image description here

我在其他 2 种不同的形式中使用了相同的元素和脚本，但它在其中一种形式中不起作用。

var password = document.getElementById('pwd'), confirm_password = document.getElementById('cpwd');
	function validatePassword() {
		if (password.value != confirm_password.value) {
			confirm_password.setCustomValidity('Passwords Don\'t Match');
		} else {
			confirm_password.setCustomValidity('');
		}
	}
	password.onchange = validatePassword;
	confirm_password.onkeyup = validatePassword;

<div class="input-field col s12 m6">
  <input id="pwd" name="pwd" type="password" class="validate" minlength="8" required="">
  <label for="pwd" data-error="Please enter a name of length minum 8 characters" data-success="Perfect!">Desired Password<span class="red-text">&nbsp;*</span></label>
</div>
					
<div class="input-field col s12 m6">
  <input id="cpwd" name="cpwd" type="password" class="validate"  required="">
  <label for="cpwd" data-error="Please enter the same password again" data-success="Perfect!">Confirm password<span class="red-text">&nbsp;*</span></label>
</div>


  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">

      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

【问题讨论】：

先修整两个密码，然后验证。
请详细说明“不起作用”。应该发生什么以及实际发生了什么？
aside：使用inp.oninput 事件而不是键和更改事件
validate 仅适用于页面中的一种表单，或者至少您有不同的类来获取值，或者您在一个页面中多次使用一个 id。我有一个 div，其中包含从具有相同表单输入类的数据库生成的多个表单，我遇到了同样的问题。我将代码更改为只有一个可见的页面表单，其他表单我隐藏了。 jquery 不验证隐藏的输入值。当我移动到下一个表单时，我能够验证表单并隐藏它们。
当您在confirm_password 中再输入一个字符时是否匹配（例如"password1"？那么这可能是因为您使用.onkeyup 调用validate()，而该字符实际上并未出现那个时候输入到<input>，所以这个值还没有更新。

标签： javascript html html5-validation

【解决方案1】：

Password: <input id="pwd" name="pwd" type="password"><br><br>
Conform Password: <input id="cpwd" name="cpwd" type="password">
<div id="errorMsg"></div>
<script>
var password = document.getElementById('pwd');
confirm_password = document.getElementById('cpwd');
    function validatePassword() {
        if ((confirm_password.value!='')&&(password.value != confirm_password.value)) {
            document.getElementById('errorMsg').innerHTML='Passwords Don\'t Match';
        } else {
            document.getElementById('errorMsg').innerHTML='';
        }
    }
    password.onchange = validatePassword;
    confirm_password.onkeyup = validatePassword;
</script>

【讨论】：

我认为这是JS中最简单的方式。

【解决方案2】：

我建议不要使用keyup 或change 事件，而是收听input 事件。

来自the relevant article on MDN：

当 <input> 或 <textarea> 元素的值发生变化时，DOM input 事件被同步触发。

var password = document.getElementById('pwd'),
  confirm_password = document.getElementById('cpwd');

function validatePassword() {
  if (password.value !== confirm_password.value) {
    confirm_password.setCustomValidity("Passwords Don't Match");
  } else {
    confirm_password.setCustomValidity('');
  }
}
password.oninput = validatePassword;
confirm_password.oninput = validatePassword;

<div class="input-field col s12 m6">
  <input id="pwd" name="pwd" type="password" class="validate" minlength="8" required="">
  <label for="pwd" data-error="Please enter a name of length minum 8 characters" data-success="Perfect!">Desired Password<span class="red-text">&nbsp;*</span></label>
</div>

<div class="input-field col s12 m6">
  <input id="cpwd" name="cpwd" type="password" class="validate" required="">
  <label for="cpwd" data-error="Please enter the same password again" data-success="Perfect!">Confirm password<span class="red-text">&nbsp;*</span></label>
</div>

【讨论】：

【解决方案3】：

显然，这只是剩余脚本中的类冲突，因此没有问题。

抱歉给您添麻烦了。

感谢您的所有努力。

【讨论】：