javascript - 在输入时和为空时验证密码字段

Question

如何在输入时和为空时验证密码字段（包括输入的空格）？

JS

$(document).ready(function() 

{
$("#login_btn").click(function(){
    if($("#pass").val() == "") {
        $("#error").show("slow");
    }
    else if($("#pass").val() != "") {
        $("#error").hide("slow");
    }
});

});

HTML

<div id="login">
    <div id="login_header"><h2>Sign in</h2></div>
    <div id="dept">Department
        <select>
            <option value="CO" selected>CO</option>
        </select>
    </div>
    <div id="pass">Password
        <input type="password">
    </div>
    <div id="error">
        Required field cannot be blank
    </div>
    <div id="btn">
        <input type="button" value="Sign in" id="login_btn">
    </div>
</div>

http://jsfiddle.net/sfTHc/1/

Answer 1

$("#pass").val()没有意义，因为#pass它是一个div，而不是密码字段。固定版本：

$("#login_btn").click(function () {
    var pass = $.trim($("#pass input").val());
    if (!pass) {
        $("#error").show("slow");
    } else {
        $("#error").hide("slow");
    }
});

http://jsfiddle.net/sfTHc/3/

Answer 2

使用 keypress 事件并在验证函数中修剪从小部件检索到的值，然后再对其进行验证。

$(document).ready(function() {
    $("#login_btn").keypress(function(){
        var pass = $("#pass input").val();
        if($.trim(pass) == "") {
            $("#error").show("slow");
        }
        else  {
            $("#error").hide("slow");
        }
    });

});

编辑：修改了 dfsq 的答案正确指出的选择器。

Answer 3

使用 $.trim 并执行以下操作：

$(document).ready(function() {
    $("#login_btn").click(function(){
        if($.trim($("#pass input").val()).length == 0) {
            $("#error").show("slow");
        } else {
            $("#error").hide("slow");
        }
    });

});

现场演示：http: //jsfiddle.net/Soldier/C9es6/