Question

如果密码与使用jquery的确认密码不匹配，我试图使消息显示在无效反馈（确认密码）中，但是每当我尝试删除密码中的单个字符时，消息仍然不会显示为无效反馈

$("#txtpassword").keyup(function () {
    var value = $(this).val();
    var password = $("#txtconfirmpassword");
    if (value.length == 0) {
        $("#passRequired").html("Required Field");
    }
    else if (value != password) {
        $("#confirmRequired").html("Password doesn't match");
    }
    else {
        $("#passRequired").html("Password must contain 8 characters with numbers and letters with at least 1 upper case character.");
    }
});

function check(input) {
    if (input.value != document.getElementById('txtpassword').value) {
        input.setCustomValidity('Password must be matched');
    }
    else {
        input.setCustomValidity('');
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-12 col-md-8 center-block">
     <label for="inputEmail4">Password</label>
     <input type="password" class="form-control" id="txtpassword" placeholder=""  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Password minimum of 8 characters" aria-describedby="inputGroupPrepend" required>
     <div class="invalid-feedback" id="passRequired">
         Required Field
     </div>
 </div>

 <div class="form-group col-12 col-md-8 center-block">
     <label for="inputEmail4">Confirm Password</label>
     <input type="password" class="form-control" id="txtconfirmpassword" placeholder="" oninput="check(this)"  style="margin:0px auto; display:block;" aria-describedby="inputGroupPrepend" required>
     <div class="invalid-feedback" id="confirmRequired">
         Required Field.
     </div>
 </div>

Answer 1

主要问题来自于：

中缺少的.val()

var password = $("#txtconfirmpassword").val();

因此您的代码尝试将字符串与jQuery对象进行比较，这就是条件失败的原因。

$("#txtpassword").keyup(function() {
  var value = $(this).val();
  var password = $("#txtconfirmpassword").val();

  if (value.length == 0) {
    $("#passRequired").html("Required Field");
  } else if (value != password) {
    $("#confirmRequired").html("Password doesn't match");
  } else {
    $("#passRequired").html("Password must contain 8 characters with numbers and letters with at least 1 upper case character.");
  }
});
$("#txtconfirmpassword").keyup(function() {
  if ($(this).val() != $('#txtpassword').val()) {
    $(this).get(0).setCustomValidity('Password must be matched');
  } else {
    $(this).get(0).setCustomValidity('');
  }
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="form-group col-12 col-md-8 center-block">
    <label for="inputEmail4">Password</label>
    <input type="password" class="form-control" id="txtpassword" placeholder="" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Password minimum of 8 characters" aria-describedby="inputGroupPrepend" required>
    <div class="invalid-feedback" id="passRequired">
      Required Field
    </div>
  </div>

  <div class="form-group col-12 col-md-8 center-block">
    <label for="inputEmail4">Confirm Password</label>
    <input type="password" class="form-control" id="txtconfirmpassword" style="margin:0px auto; display:block;" aria-describedby="inputGroupPrepend" required>
    <div class="invalid-feedback" id="confirmRequired">
      Required Field.
    </div>
  </div>

  <button>Submit</button>
</form>

如何使消息出现在无效反馈中？

1 个答案: