javascript - onchange 检查密码是否相似

Question

我创建了一个小字段来检查密码是否相似，就像在写确认密码时它应该验证我创建的确认密码是否相似但是它不起作用有人可以帮我解决这个问题。

我的代码:

function ppd() {
  var password = $("#password").val();
  var confirm_password = $("#confirm").val();

  if (password != confirm_password) {
    $("#confirm").css('border-color', "#c80000");
    $("#textboxid").css({
      "background-color": "#fee2e2"
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <input type="password" id="password" name="" placeholder="Password" class="form-control" />
</div>

<div class="form-group">
  <input type="password" id="confirm" onChange="ppd();" name="" placeholder="Confirm Password" class="form-control" />
</div>

jQuery fiddle Here

Answer 1

您需要触发onkeyup 事件处理程序。该事件在将字符输入到表单字段后触发。

这是解决方案。

document.getElementById('confirm').onkeyup=function(){
    var password = $("#password").val();
	var confirm_password = $("#confirm").val();
	if(password != confirm_password) {
           $("#confirm").css('border-color', "red");
	}
        else{
           $("#confirm").css('border-color', "green");
        }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
     <input type="password" id="password" name="" placeholder="Password" class="form-control" />
</div>
						
<div class="form-group">
	<input type="password" id="confirm"  name="" placeholder="Confirm Password" class="form-control" />
</div>

另一种解决方案是使用oninput 方法。

document.getElementById('confirm').oninput=function(){
  //code here
}