Question

我需要在Javacript中编写一个函数来更新按钮颜色，并在所有字段都有效时启用它。请参阅下面的图片，了解用户与表单的互动

当管理员想要更新用户时，只有在以下情况下应用

时，更新按钮才需要为绿色

至少启用一个编辑按钮。（当启用编辑按钮时，将删除相应的字段，用户可以写一些内容）
该字段必须实时验证
如果我取消选中该字段，则脚本必须重新验证其他打开的字段。对于实例，如果打开字段为空白，则按钮应为红色，但如果我关闭该字段并且启用了另一个字段并填充了有效文本（假设只有1个字符表示有效），则红色按钮应变为绿色

javascript中是否有一种方法可以创建全局按钮侦听器，而不是对此方案有用

此外，当我打开密码复选框时，启用了两个字段，只有当密码有效并且与确认的密码匹配时，该按钮才有效

请参阅以下jsp页面的简短摘要

我省略了密码字段的小图标和代码的引导部分

<sf:form class="form-horizontal" 
         role="form" 
         id="formsubmit" 
         method="POST" 
         action="${pageContext.request.contextPath}/updateprofile"
         commandName="user">
          <sf:input type="text" class="form-control" value="${user.username}" path="username" readonly="true"></sf:input>

         <input type="checkbox" class="form-control" name="email-checkbox" checked />
         <sf:input id="emailInput" type="text" class="form-control" path="email" placeholder="Type Email" name="email" disabled="true" />

        <input type="checkbox" class="form-control" name="first-name-checkbox" checked />
        <sf:input id="nameInput" type="text" class="form-control" placeholder="Type First Name" path="firstName" name="firstName" disabled="true" />

        <input type="checkbox" class="form-control" name="last-name-checkbox" checked />
        <sf:input id="surnameInput" type="text" class="form-control" placeholder="Type Last Name" path="lastName" name="lastName" disabled="true" />

        <input type="checkbox" class="form-control" name="password-checkbox" checked />
        <input id="password" type="password" class="form-control" name="password" placeholder="Insert Password" disabled>
        <input id="confirmpassword" type="password" class="form-control" name="confirmpassword" placeholder="Confirm Password" disabled>
        <button id="updateUserBtn" type="submit" class="btn btn-danger" data-loading-text="Creating User..." disabled>Update User</button>
</sf:form>

我第一次尝试使用javascript，它仅适用于密码字段，但未与编辑按钮连接

$("input[type=password]").keyup(
            function() {
                var ucase = new RegExp("[A-Z]+");
                var lcase = new RegExp("[a-z]+");
                var num = new RegExp("[0-9]+");

                if ($("#password").val().length >= 8) {
                    $("#8char").removeClass("glyphicon-remove");
                    $("#8char").addClass("glyphicon-ok");
                    $("#8char").css("color", "#00A41E");
                } else {
                    $("#8char").removeClass("glyphicon-ok");
                    $("#8char").addClass("glyphicon-remove");
                    $("#8char").css("color", "#FF0004");
                }

                if (ucase.test($("#password").val())) {
                    $("#ucase").removeClass("glyphicon-remove");
                    $("#ucase").addClass("glyphicon-ok");
                    $("#ucase").css("color", "#00A41E");
                } else {
                    $("#ucase").removeClass("glyphicon-ok");
                    $("#ucase").addClass("glyphicon-remove");
                    $("#ucase").css("color", "#FF0004");
                }

                if (lcase.test($("#password").val())) {
                    $("#lcase").removeClass("glyphicon-remove");
                    $("#lcase").addClass("glyphicon-ok");
                    $("#lcase").css("color", "#00A41E");
                } else {
                    $("#lcase").removeClass("glyphicon-ok");
                    $("#lcase").addClass("glyphicon-remove");
                    $("#lcase").css("color", "#FF0004");
                }

                if (num.test($("#password").val())) {
                    $("#num").removeClass("glyphicon-remove");
                    $("#num").addClass("glyphicon-ok");
                    $("#num").css("color", "#00A41E");
                } else {
                    $("#num").removeClass("glyphicon-ok");
                    $("#num").addClass("glyphicon-remove");
                    $("#num").css("color", "#FF0004");
                }

                if ($("#password").val() == $("#confirmpassword").val()
                        && ($("#confirmpassword").val() != 0)) {
                    $("#pwmatch").removeClass("glyphicon-remove");
                    $("#pwmatch").addClass("glyphicon-ok");
                    $("#pwmatch").css("color", "#00A41E");
                } else {
                    $("#pwmatch").removeClass("glyphicon-ok");
                    $("#pwmatch").addClass("glyphicon-remove");
                    $("#pwmatch").css("color", "#FF0004");
                }

                if ($("#password").val().length >= 8
                        && ucase.test($("#password").val())
                        && lcase.test($("#password").val())
                        && num.test($("#password").val())
                        && $("#password").val() == $("#confirmpassword").val()
                        && ($("#confirmpassword").val() != 0)) {
                    $("#updateUserBtn").removeClass("btn-danger");
                    $("#updateUserBtn").addClass("btn-success");
                    $("#updateUserBtn").prop('disabled', false);
                } else {
                    $("#updateUserBtn").removeClass("btn-success");
                    $("#updateUserBtn").addClass("btn-danger");
                    $("#updateUserBtn").prop('disabled', true);
                }
            });

Answer 1

keyup元素附加的form处理程序将针对其中包含keyup事件的任何字段进行调用。这是因为大多数事件都会通过他们所有的祖先冒出来，并且可以在任何级别上进行聆听。

要求的小例子：）

$("form").keyup(
        function() {
            // your existing code here
        });

如果您只想定位更改的特定输入，可以使用委托的处理程序代替附加到表单（这个使用特定的表单ID）：

$("#formsubmit").on('keyup', 'input[type=text],input[type=password]',
        function() {
            // your existing code here
        });

这会在事件时应用选择器，因此非常有效，并且还意味着this值将是更改的控件（如果这对您有用）。

作为一般的jQuery指南，只运行一次选择器并保存元素。这是更快和更快更短，通常更可读。您还可以将大多数jQuery函数链接在一起。

e.g。

 var $password = $("#password");
 var $8char = $("#8char");

 if ($password.val().length >= 8) {
        $8char.removeClass("glyphicon-remove").addClass("glyphicon-ok").css("color", "#00A41E");

如何在javascript中更改按钮状态

1 个答案: