Question

我正在编写一个验证表单字段的脚本。表单输入具有data-validate属性，该属性包含不同功能的CSV。我遍历包含数据验证值的所有输入，将这些值分离到一个数组中，并循环遍历该数组以调用相应的函数。我的问题是window[func]未定义 - 我得到＆＃34;无法读取属性＆＃39;应用＆＃39;未定义＆＃34;信息。我究竟做错了什么？这是jsFiddle

<input type="text" name="first_name" data-validate="min_length[4]">

(function($){
    var fields = [];
    var i = 0;
    $('[data-validate]').each(function(){
        var rules = $(this).data('validate').split("|");
        var label = $(this).parent().find('label').first();
        fields[i] = {
                name: $(this).attr("name"),
                label: label.text(),
                rules: rules,
                element: $(this)
        }
        i++;
    });
    $.each(fields, function(key, field){
        field.element.on('focusout', function(){
            $.each(field.rules, function(key1, rule){
                if(rule.includes("[")){
                    var rule = rule.match(/(.*?)\[(.*?)\]/);
                    func = rule[1];
                    var len = rule[2];
                    params = [field.element.val(), len];
                } else {
                    func = rule;
                    params = [field.element.val()];
                }
                if(callFunc(func, params)){
                    field.element.addClass('is-valid').removeClass('is-invalid');
                } else {
                    field.element.addClass('is-invalid').removeClass('is-valid');
                }
            });
        });
    });
})(jQuery);

function min_length(str, len){
    return str.length > len;
}
function callFunc (func, arguments){
    window[func].apply(null, Array.prototype.slice.call(arguments, 1));
}

Answer 1

关于您遇到的具体错误，我根本没有从您的代码中获得该错误。但是，这是我通过一些测试（和修复）得出的结果：

1）您需要return callFunc中调用的函数的值，否则您将获得undefined。另外，你没有传递正确数量的论点。

return window[func].apply(null, Array.prototype.slice.call(arguments));

2）您需要将len参数转换为字符串中的数字：

return str.length > Number(len);

3）你的两个课程都被称为is-valid：）

Here's the full working code.

Answer 2

我认为我做了一些改进，检查出来：

＆＃13;

(function($){
  window.min_length = function(str, len) {
	  return str.length > len;
  }
  function callFunc(func, arguments){
      return window[func](...arguments);
  } 
	var fields = [];
	$('[data-validate]').each(function(){
		var rules = $(this).data('validate').split("|");
		var label = $(this).parent().find('label').first();
		fields.push({
				name: $(this).attr("name"),
				label: label.text(),
				rules: rules,
				element: $(this)
		});

	});

	$.each(fields, function(key, field){
		field.element.on('input', function(){
			$.each(field.rules, function(key1, rule){
				if(rule.includes("[")){
					var rule = rule.match(/(.*?)\[(.*?)\]/);
					func = rule[1];
					var len = rule[2];
					params = [field.element.val(), len];
				} else {
					func = rule;
					params = [field.element.val()];
				}
				if(callFunc(func, params)){ 
					field.element.removeClass('is-invalid').addClass('is-valid');
				} else { 
					field.element.removeClass('is-valid').addClass('is-invalid');
				}
			});
		});
	});
})(jQuery);

＆＃13;

input {
    outline: 0;
}
.is-valid {
    border: 1px solid green;
}
.is-invalid {
    border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="first_name" data-validate="min_length[4]">

＆＃13;

一些问题：

您检查函数callFunc(func, params)调用的结果但是它什么都不返回，即undefined，所以你的条件总是如此 false。您应该从min_length()返回结果 callFunc()。
我在代码段的css部分找到了2个类is-valid 的jsfiddle。其中一个应该是is-invalid。
同样由于一些关闭问题，似乎你的函数min_height没有成为window的属性。所以我将它放在IIFE中并明确地将其添加到window中因为关闭而再次发挥作用。
不需要i变量 - 您只能push()个对象进入阵列。
也可以使用...运算符调用min_length 在callFunc内而不是apply内。
考虑使用input事件代替focusout。

为什么JS中的window [func]未定义？

2 个答案: