javascript - 当我在输入字段外单击时，不触发 blur()

Question

我正在尝试创建一个 jQuery 验证，到目前为止我已经设法将 addClass('has-error') 添加到 div.form-control。当我按 TAB 键或单击输入字段外时，我试图删除该类，但我的代码无法正常工作。

HTML代码

<form class="form-horizontal" onsubmit='return false;' id="useradd">

<input type="hidden" id="token" name="_token" value="{{csrf_token()}}">
<div class="form-group">
    <label class="col-sm-2 control-label">Name</label>

    <div class="col-sm-8">
        <input type="text" class="form-control" value="" name="username" id="username" required>
    </div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group" id="useremail-div">
    <label class="col-sm-2 control-label" id="email-label">Email</label>
    <div class="col-sm-8">
        <input type="text" class="form-control" value="" name="useremail" id="useremail">
    </div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
    <label class="col-sm-2 control-label">Password</label>

    <div class="col-sm-8">
        <input type="password" class="form-control" value="" name="password" id="password" required>
    </div>
</div>

JS代码

 if ($("#username").val() == "" || $("#username").val().length < 3) {
            $("#username").addClass('error');
            return false;
        } else {
            name = $("#username").val();
            $("#username").removeClass('error');
        }
        if ($("#useremail").val() == "" || $("#useremail").val().length < 3 || !emailpatt.test($("#useremail").val())) {
            $("#useremail-div").addClass('has-error');
            $('#email-label').text('Incorrect Email Address');
            return false;
        } else {

            $("#useremail").blur(function() {
                console.log('out');
            });


        }

我试过 focusout() 和 focusleave()，没有任何效果。

Answer 1

你必须像这样把模糊触发器放在 if else 之外:

    $(document).ready(function(){
    $("#username").blur(function() {
        if ($("#username").val() == "" || $("#username").val().length < 3) {
            $("#username").addClass('error');
        } else {
            name = $("#username").val();
            $("#username").removeClass('error');
        }
    });        

    $("#useremail").blur(function() {
        if ($("#useremail").val() == "" || $("#useremail").val().length < 3 || !emailpatt.test($("#useremail").val())) {
            $("#useremail-div").addClass('has-error');
            $('#email-label').text('Incorrect Email Address');
        } else {
            $("#useremail-div").removeClass('has-error');
            $('#email-label').text('Email Address');
        }
    });
});

您也不能在 if else 语句中使用 return false。 Return 在函数中使用。而且我不知道该 emailpatt 是否在其他地方定义。如果没有，就删除它，让 if 看起来像这样:

if ($("#useremail").val() == "" || $("#useremail").val().length < 3)