密碼確認信息

Question

在我的表單上，我有兩個文本框名稱密碼，並確認密碼是否正常工作，現在我的問題是，當我在兩個文本框中鍵入一些示例密碼並將其刪除時，消息密碼匹配仍然可見，如果用戶輸入一些文本或數字，如果用戶刪除他在文本框中鍵入的內容，該消息將不可見，並且如果密碼不匹配，該按鈕也將被禁用？ 先進的謝謝。

這是我的示例代碼：

<div class="row">
        <div class="col-md-6">
            <!-- Material input -->
            <div class="md-form mt-0">
                <input type="text" class="form-control" placeholder="Password" name="password" id="password" onkeyup='check();' required >
                 <div class="invalid-feedback">
       Enter password.     
       </div>

            </div>
        </div>

  <div class="col-md-6">
            <!-- Material input -->
            <div class="md-form mt-0">
                <input type="text" class="form-control" placeholder="Confirm Password" name="password" id="password1" onkeyup='check();' required >
           </div>
           <div style="margin-top:-20px; font-size:13px;">
            <span id='message'></span>
            </div>
        </div>
    </div>

這是我的jQuery：

$('#password, #password1').on('keyup', function () {
  if ($('#password').val() == $('#password1').val()) {
    $('#message').html('Password Match').css('color', 'green');
  } else 
    $('#message').html('Password not Match').css('color', 'red');
});

電流輸出

Answer 1

您沒有檢查字段的值是否為空，因此空字符串等於另一個空字符串。

$('#password, #password1').on('keyup', function () {
  if (!$('#password').val()) {
    $('#message').html('');
  } else {
      if ($('#password').val() == $('#password1').val()) {
        $('#message').html('Password Match').css('color', 'green');
      } else {
        $('#message').html('Password not Match').css('color', 'red');
    }
  }
});

https://jsfiddle.net/xpvt214o/492802/

Answer 2

您可以通過以下方法先檢查兩個密碼的值來做到這一點-

 $('#password, #password1').on('keyup', function() { if ($('#password').val() || $('#password').val()) { if ($('#password').val() == $('#password1').val()) { $('#message').html('Password Match').css('color', 'green'); } else { $('#message').html('Password not Match').css('color', 'red'); } } else { $('#message').html(''); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-md-6"> <!-- Material input --> <div class="md-form mt-0"> <input type="text" class="form-control" placeholder="Password" name="password" id="password" required> <div class="invalid-feedback"> Enter password. </div> </div> </div> <div class="col-md-6"> <!-- Material input --> <div class="md-form mt-0"> <input type="text" class="form-control" placeholder="Confirm Password" name="password" id="password1" required> </div> <div style="margin-top:0px; font-size:13px;"> <span id='message'></span> </div> </div> </div>