Question

有2个输入字段，一个用于输入新密码，另一个用于确认在新密码字段中写入的密码，我试图使在确认密码文本框下方显示一个显示...... <label for="new-password" class="col-sm-4 col-form-label">New Password</label> <div class="col-sm-6"> <input id="new-password" type="password" class="form-control new-p" name="new-password" required> </div> <div class="form-group row"> <label for="new-password-confirm" class="col-sm-4 col-form-label">Confirm New Password</label> <div class="col-sm-6"> <input id="new-password-confirm" type="password" class="form-control confirm" name="new-password_confirmation" required> <div class='row' id="edit-profile-buttons"> <button type='submit' id="editUser" name="editUser">Change Password</button> </div> </div> </div> </form> $(document).ready(function(){ $('.confirm').on('change', function (e) { var test = $('.new-p').val(); if ((e.target.value === test) && e.target.value != '' ){ $(".confirm").parent().next(".error").remove(); $("#editUser").removeAttr("disabled"); }else alert(e.target.value); $(".confirm").parent().after("<div class='error' style='color:red;margin-bottom: 20px;'>Please enter the password you typed above</div>"); $("#editUser").attr("disabled", "disabled"); }); });的div。当值不等于新密码字段的值时，提交按钮将被禁用，但正确时，请删除错误div并启用提交按钮，但不会启用提交按钮，也不会删除错误div，它还会多次显示错误div，请问我是什么错误

{{1}}

Answer 1

我认为您的else语句缺少方括号：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
            crossorigin="anonymous"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('.confirm').on('change', function (e) {
                var test = $('.new-p').val();
                if ((e.target.value === test) && e.target.value != '') {
                    debugger;
                    $(".confirm").parent().next(".error").remove();
                    $("#editUser").removeAttr("disabled");
                } else { //else do this whole thing
                    alert(e.target.value);
                $(".confirm").parent().after("<div class='error' style='color:red;margin-bottom: 20px;'>Please enter the password you typed above</div>");
                    $("#editUser").attr("disabled", "disabled");
                }
            });
        });
    </script>
</head>
<body>

    <form>
        <label for="new-password" class="col-sm-4 col-form-label">New Password</label>

        <div class="col-sm-6">
            <input id="new-password" type="password" class="form-control new-p" name="new-password" required>
        </div>
        <div class="form-group row">
            <label for="new-password-confirm" class="col-sm-4 col-form-label">Confirm New Password</label>
            <div class="col-sm-6">
                <input id="new-password-confirm" type="password" class="form-control confirm" 
                       name="new-password_confirmation" required>
                <div class='row' id="edit-profile-buttons">
                    <button type='submit' id="editUser" name="editUser">Change Password</button>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

Answer 2

以下是一些提示，向您显示解决方案的路径：

尝试使用input事件代替change
将您的应用程序状态拉到一个单独的对象中，并进行比较。
使错误消息成为持久的DOM元素，该元素将根据密码比较启用或禁用。

$(document).ready(function() {
  var state = {
    p1: "",
    p2: ""
  };
  
  $('#error').hide();
  $('#new-password').on('input', enter_value.bind(null, "p1"));
  $('#new-password-confirm').on('input', enter_value.bind(null, "p2"));
  
  function enter_value(value_name, event) {
    var new_value = event.target.value;
    state[value_name] = new_value;
    compare_values();
  }
  
  function compare_values() {
    if (state.p1 !== state.p2) {
      $('#error').show();
      $("#editUser").attr("disabled", "disabled");
      return;
    }
    $('#error').hide();
    $("#editUser").removeAttr("disabled");
  }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="new-password" class="col-sm-4 col-form-label">New Password</label>

                        <div class="col-sm-6">
                            <input id="new-password" type="password" class="form-control new-p" name="new-password" required></div>
<div class="form-group row">
<label for="new-password-confirm" class="col-sm-4 col-form-label">Confirm    New Password</label>
    <div class="col-sm-6">
    <input id="new-password-confirm" type="password" class="form-control confirm" name="new-password_confirmation" required>
<div class='row' id="edit-profile-buttons">
<button type='submit' id="editUser" name="editUser">Change Password</button>
<div id='error' style='color:red;margin-bottom: 20px;'>Please enter the password you typed above</div>
</div></form>

div显示多次，并且按钮仍然禁用

2 个答案: