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

Question

有一个包含两个必填字段的表单

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

并提交按钮 需要实现一个简单的检查，如果其中一个字段为空，则两个字段为空白，当输入按钮时，按钮不活动，两个字段中的至少一些字符按钮应该在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");

    });

});

Answer 2

<script src="http://code.jquery.com/jquery-1.10.1.min.js" ></script>
<input type="text" class="req" id="pass" />
<input type="text" class="req" id=c_pass" />
<input type="submit" class="btn" id="button" onClick='alert("hi");' disabled/>
<script>

$(function (){
$('.req').change(function(){
    if ($('#pass').val() == '' || $('#c_pass').val() == '')
        {
            $('#button').attr('disabled',true);
        }
    else
        {
            $('#button').attr('disabled',false);
        }
});
});

</script>

Answer 3

模板;

<form id="test">
    <input type="password" id="passsword" />
    <input type="password" id="conf_password" />
    <input type="submit" value="ok" id="btnSubmit">
</form>

Jquery Code;

$(document).ready(function () {
        $('#test #btnSubmit').attr('disabled', 'disabled');
        $('#test #passsword').keyup(function () {
            if ($(this).val().length > 0 && $('#test #conf_password').val().length > 0) {
                $('#test #btnSubmit').removeAttr('disabled');
            }
        });
        $('#test #conf_password').keyup(function () {
            if ($(this).val().length > 0 && $('#test #passsword').val().length > 0) {
                $('#test #btnSubmit').removeAttr('disabled');
            }
        });
    });