Question

如何使用Jquery在单个输入元素上调用多个函数？（不使用任何插件）由于某种原因，我的系统无法正常工作。在执行之前，check_email函数会覆盖第一个函数。代码：

$(document).ready(function(){
$("#err-msg-email").hide();
var err_name = false;
var err_email = false;
 $("#email").focusout(function(){
    var input=$(this);
    var blank = input.val().replace(/ /g,'').length;
    var is_name=input.val();
    if(is_name&&blank > 3){input.removeClass("invalid-name");
    $("#err-msg-email").hide();
    input.addClass("valid-name");
}
    else{input.addClass("invalid-name");
    input.removeClass("valid-name");

$("#err-msg-email").html("* Email is required");
            $("#err-msg-email").show();
            err_email = true;   
}
    });

function check_email() {

        var pattern = /^[\w-.+]+@[a-zA-Z0-9.-]+.[a-zA-z0-9]{2,4}$/;
        if(pattern.test($("#email").val())) {
            $("#email").removeClass("invalid-name");
            $("#email").addClass("valid-name");
            $("#err-msg-email").hide();
        } else {
            $("#err-msg-email").html("* Invalid email");
            $("#err-msg-email").show();
            $("#email").removeClass("valid-name");
            $("#email").addClass("invalid-name");
            err_email = true;

        }

    }

$("#email").focusout(function() {

        check_email();

    });
});

Answer 1

focusOut是输入框发出的事件，您只能绑定一个函数或将侦听器附加到该事件。换句话说，当事件发出时，您就有机会响应该事件。

因此，在您的代码中，您基本上是在消除绑定本身。首先，您绑定一个匿名函数，然后使用check_email函数覆盖它。

有效地，在发出focusout事件时，仅绑定了check_email个函数。这就是您看不到匿名功能无效的原因（因为它根本不存在）。

使用此代码无法得出您实际上要实现的目标。但是，如果您希望两种逻辑都可以集中精力工作，则可以将两种逻辑都放在一个函数中，然后将该函数绑定到focusout事件。

我强烈建议您阅读Javascript events binding.

如前所述，您可以将两个检查合并到一个函数中。修改您的check_email函数，如下所示：

function check_email() {

        var pattern = /^[\w-.+]+@[a-zA-Z0-9.-]+.[a-zA-z0-9]{2,4}$/;
        // checking for blank email here, we only move ahead if the email is not blank
        if($("#email").val() != '') {
          if(pattern.test($("#email").val())) {
            $("#email").removeClass("invalid-name");
            $("#email").addClass("valid-name");
            $("#err-msg-email").hide();
          } else {
            $("#err-msg-email").html("* Invalid email");
            $("#err-msg-email").show();
            $("#email").removeClass("valid-name");
            $("#email").addClass("invalid-name");
            err_email = true;

         }
      } else {
         // do whatever you want when the email is blank, e.g.
            $("#err-msg-email").html("*The email field is blank");
            $("#err-msg-email").show();
      }

    }

单个元素上有多个验证规则

1 个答案: