jquery - 使用 keyUp 密码确认时，样式仅在一个字段中工作

Question

我申请的样式只在1个领域有效。

请帮忙

我的代码:

http://jsfiddle.net/ucg1fjvd/

Jquery+Html :

$(document).ready(function() {

  $('#password, #confirm_password').keyup(validate);

  function validate() {
    if ($('#password').val() == $('#confirm_password').val()) {
      //matching
      $('#password').css('border-color', 'blue');
      $('#confirm_password').css('border-color', 'blue');
    } else
      //not matching
      $('#password').css('border-color', 'red');
    $('#confirm_password').css('border-color', 'red');

  };

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="password" type="text" />
<br/>
<input id="confirm_password" type="text" />
<p id="validate-status"></p>

Answer 1

您必须用 {} 将 else 括起来，以确保如果条件不满足，这两行都将被执行。

喜欢:

$(document).ready(function() {

  $('#password, #confirm_password').keyup(validate);

  function validate() {
    if ($('#password').val() == $('#confirm_password').val()) {
      $('#password').css('border-color', 'blue');
      $('#confirm_password').css('border-color', 'blue');
    } else { //Enclosed the else with {}
      $('#password').css('border-color', 'red');
      $('#confirm_password').css('border-color', 'red');
    }
  };

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="password" type="text" />
<br/>
<input id="confirm_password" type="text" />
<p id="validate-status"></p>

---

如果没有{} Only，第一行只有在条件满足时才会执行。并且第 2 行将一直执行。

    } else 
      $('#password').css('border-color', 'red');          // <-- Else
    $('#confirm_password').css('border-color', 'red');    // <-- Not part of the else and will be executed everytime.