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小提琴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
}

Answer 2

我已经检查了你给定小提琴上的代码。除了lastline之外没有任何错误，因为你没有这个id的div。

    $("#textboxid").css({"background-color": "#fee2e2"});

您的代码绝对正确，最好在此方案中使用onchange。只是你必须了解onchange如何在这里工作。当元素失去焦点并且自上次元素获得焦点后内容发生更改时，将触发onchange事件。

我不知道那里有什么错，可能是jquery文件无法正常工作。这段代码正在运行。

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

的Javascript

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

if(password != confirm_password) {
    $("#confirm").css({'border-color': "#c33"});
    $("#password").css({"background-color": "red"});

} }

我为您提供了我的codepen与您自己的代码的链接。check here

onchange检查密码是否相似

2 个答案: