javascript - 检查空字段并添加样式属性

Question

有一个表单有两个必填字段

<input type="password" id="passsword" />
<input type="password" id="conf_password" />

和提交按钮需要实现一个简单的检查，如果其中一个字段为空，则 2 个字段为空白，输入时按钮不活动至少两个字段中的一些字符按钮应该在 css 文件中执行:

#login_form{
    visibility: hidden;
}
#thanks{
    visibility: visible;
}

提示如何用JavaScript或JQuery实现？

Answer 1

您需要在 keyup 事件中检查两者:

基本答案:

$(document).ready(function(){

    $("#password").keyup(function(){
   
        if($(this).val().length > 0 && $("#password_conf").val().length > 0)
            $("#submit").removeAttr("disabled");
        else
            $("#submit").attr("disabled", "disabled");
    
   });
 
    $("#password_conf").keyup(function(){
   
        if($(this).val().length > 0 && $("#password").val().length > 0)
            $("#submit").removeAttr("disabled");
        else
            $("#submit").attr("disabled", "disabled");
    
    });

});

JSFiddle

---

---

设置最小密码长度:

此外，您可以使用实例变量设置最小密码长度:

var minLength = 3;

$(document).ready(function(){

    $("#password").keyup(function(){
   
        if($(this).val().length >= minLength && $("#password_conf").val().length >= minLength)
            $("#submit").removeAttr("disabled");
        else
            $("#submit").attr("disabled", "disabled");
    
   });
 
    $("#password_conf").keyup(function(){
   
        if($(this).val().length >= minLength && $("#password").val().length >= minLength)
            $("#submit").removeAttr("disabled");
        else
            $("#submit").attr("disabled", "disabled");
    
    });

});

请记住，您也应该始终在服务器端验证长度。不要依赖 JavaScript 为您进行检查。

---

---

使用 jQuery 编辑 CSS:

您提到您不知道如何使用 jQuery 修改 CSS。这是这样的:

$("selector").css("css-property", "value");

例如:

$("#submit").css("border-color", "blue");

您还可以通过将它们括在方括号中来编辑多个属性:

$("#submit").css({"border-color": "blue", "visibility":"visible"});

---

---

综合起来:

如果您想隐藏提交按钮而不是禁用它，同时使用最小密码长度，请执行以下操作:

var minLength = 3;

$(document).ready(function(){

    $("#password").keyup(function(){
   
        if($(this).val().length >= minLength && $("#password_conf").val().length >= minLength)
            $("#submit").css("visibility", "visible");
        else
            $("#submit").css("visibility", "hidden");
    
   });
 
    $("#password_conf").keyup(function(){
   
        if($(this).val().length >= minLength && $("#password").val().length >= minLength)
            $("#submit").css("visibility", "visible");
        else
            $("#submit").css("visibility", "hidden");
    
    });

});