Jquery .apply() 不是函数错误，来自实例化对象

Question

我有一个我正在尝试实例化的对象，以便我可以创建它的不同实例，以检查不同的正则表达式模式。

在输入 + 模糊时，输入会根据正则表达式模式是否匹配而获得成功/错误类。

我已经尝试了我可能知道的一切，但它说 “未捕获的 TypeError: ((r.event.special[g.origType] || {}).handle || g.handler).apply 不是函数”

代码示例的链接 = JS Fiddle

这只是原始的js：

$(document).ready(function() {
    validate();

function validate() {
    var RegexCheck = (function(window, undefined) {
        this.check = function check() {
            validator = {
                email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,                    
                text: /^[a-zA-Z ]*$/
            };
            var isEmpty, pattern, result, elem = this.value;
            isEmpty = !elem;
            pattern = validator.email;
            result = pattern.test(elem);
            if (result === false || isEmpty) {
                $(this).removeClass('success');
                $(this).addClass("error");
            } else {
                                    $(this).removeClass('error');
                $(this).addClass("success");
            }
        };
        return check;
    })(window);

            // Instansiate RegexCheck
    var RegexCheckEmail = new RegexCheck();
    RegexCheckEmail.pattern = validator.email;
    console.log("RegexCheckEmail.pattern = " + RegexCheckEmail.pattern);
    //Change value of 'pattern'
    RegexCheckEmail.pattern = validator.text;
    console.log("RegexCheckEmail.pattern = " + RegexCheckEmail.pattern);

    //$('form#form1 [type=email]').on('input blur', RegexCheck); //works
    $('form#form1 [type=email]').on('input blur', RegexCheckEmail); //doesn't work

    console.log(RegexCheckEmail instanceof RegexCheck); //true

    var RegexCheckText = new RegexCheck();
    RegexCheckText.pattern = validator.text;
    console.log("RegexCheckText.pattern = " + RegexCheckText.pattern);
    $('form#form-1 [type=text]').on('input blur', RegexCheckText); //Seems like I can instaniate from RegexCheck but just does not seem to work
}
});

Answer 1

我认为你并不清楚类和对象是如何工作的。

您首先拥有的函数是一个构造函数，它应该定义对象具有哪些属性和方法，从它返回check 没有任何意义（或者返回任何其他内容，因为它不会用作常规函数）。 在此处查看有关对象和构造函数的更多信息：https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS。

事件处理程序需要该函数，而您正在传递对象 (RegexCheckEmail)。 所以第一个解决方法是将函数传递给事件处理程序，而不是对象。

接下来你做一些类似RegexCheckEmail.pattern = validator.email的作业，这没有多大意义。 您只需将新的pattern 属性添加到RegexCheckEmail 对象，这与check 函数内部使用的pattern 变量不同。 validator.email 也只存在于您的 check 函数中。 您应该使用对象构造函数来传递参数，而不是这些赋值。

请参阅下面的工作示例，它与您尝试在代码中实现的想法很接近，但它更简单，我希望更清晰。

$(document).ready(function() {
		validate();
    
    function validate() {
    
        validator = {
            email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            text: /^[a-zA-Z ]*$/
        };
    
        function RegexCheck(pattern) {
            this.pattern = pattern;
            
            this.check = function check(input) {
                var isEmpty, pattern, result, elem = input.value;
                isEmpty = !elem;
                result = this.pattern.test(input.value);
                if (result === false || isEmpty) {
                    $(input).removeClass('success');
                    $(input).addClass("error");
                } else {
                    $(input).removeClass('error');
                    $(input).addClass("success");
                }
            };
        };
        
        var regexCheckEmail = new RegexCheck(validator.email);
        $('#exampleEmail').on('input blur', function() {regexCheckEmail.check(this)});

        var regexCheckText = new RegexCheck(validator.text);
        $('#exampleText').on('input blur', function() {regexCheckText.check(this)});
	}
});

.container{margin-top: 50px;}

.error{
  border: 1px solid red;
}

.success{
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
    
      <form id="form1">
     
          <div class="col-sm-12">
            <div class="form-group">
              <label for="exampleEmail">Email</label>
              <input type="email" class="form-control" id="exampleEmail" placeholder="Email">
            </div>
          </div>

          <div class="col-sm-12">
            <div class="form-group">
              <label for="exampleText">Text only</label>
              <input type="text" class="form-control" id="exampleText" placeholder="Text only">
            </div>
          </div>
          
        </form>
        
    </div>
</div>