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

Question

我有一个试图实例化的对象，这样我就可以创建它的不同实例，以检查不同的Regex模式。

在input+blur中，输入会得到一个成功/错误类，这取决于正则表达式模式是否匹配。

我已经试过了我可能知道的一切，但上面写着"未捕获类型错误：(r.event.specific[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>