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>

密码确认信息

2 个答案: