密码确认信息

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>