搜索数组的一部分字符串

Question

我正在尝试搜索我的数组以查看target的值是否匹配。

(function ($) {
    
    $.fn.validate = function (x) {

        return this.each(function () {

            var wrapper = $(this);

            var xx = $.extend({
                obj: "",
            }, x || {});

            function initialized() {

                $(wrapper).children().bind('keyup', function (e) {
                    
                    console.log($.grep(xx.obj, function (t) { return t.target.indexOf($(e.target).attr("name")) }));

                });

            }
            initialized();
        });
    };

}(jQuery));
$('form').validate({ obj: [{ "target": "name=Username", "required": true, "xmin": "5", "xmax": "16" }, { "target": "name=Email", "required": true, "xmin": "5", "xmax": "16" }] });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form">
                    <input name="Username" placeholder="Username" />
                    <input name="Email" placeholder="Email" />
                    <input type="button" value="Save" />
                </form>

此行：$.grep(xx.obj, function (t) { return t.target == $(e.target).attr("name") }).length如果找到匹配则返回。我知道它说==所以如果匹配得很复杂，它只返回一个匹配。

让它做这样的事情是可行的：$.grep(xx.obj, function (t) { return t.target.contains($(e.target).attr("name")) }).length

修改 更改了代码以匹配Z-Bone答案。仍然无法正常工作

当用户在输入字段中输入内容时，它将从该输入中获取Name值($(e.target).attr("name"))并搜索xx.obj以查看该值是否与{{1}中的任何一个匹配1}}。

Answer 1

您可以使用indexOf查看字符串是否包含值。 如果我正确理解您的需要，您需要查看整个输入值是否包含在JSON对象的任何目标键中。
要做到这一点，你不应该测试每个关键事件 - 因为这将测试每个键盘事件的单个字符 您希望每次发生键盘事件时获取完整的输入值，并测试它是否存在于阵列中的任何目标键中。

在下面的代码中，我稍微更改了您的代码，以便您了解我的目标。我测试只看到用户名输入值是否包含在JSON中。您还可以添加要测试的电子邮件输入值。

请注意我改变了HTML和JS

(function($) {
    $.fn.validate = function(x) {
        return this.each(function() {
            var wrapper = $(this);
            var xx = $.extend({
                obj: "",
            }, x || {});

            function initialized() {
                $(wrapper).children().bind('keyup', function(e) {
                    var userNameValue = $('#username').val();
                    console.log($.grep(xx.obj, function(t) {
                        return (t.target.indexOf(userNameValue) > -1);
                    }).length);
                });
            }
            initialized();
        });
    };

}(jQuery));
$('form').validate({
    obj: [{
        "target": "name=Username",
        "required": true,
        "xmin": "5",
        "xmax": "16"
    }, {
        "target": "name=Email",
        "required": true,
        "xmin": "5",
        "xmax": "16"
    }]
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form">
  <input id="username" name="Username" placeholder="Username" />
  <input name="Email" placeholder="Email" />
  <input type="button" value="Save" />
</form>

希望您觉得这很有帮助。

Answer 2

我现在找到了解决方案。

$.grep(xx.obj, function (t) {
    return t.target.split('=')[1] == $(e.target).attr(t.target.split('=')[0])
})[0] 

＆＃13;

＆＃13;

(function ($) {

    $.fn.validate = function (x) {

        return this.each(function () {

            var wrapper = $(this);

            var xx = $.extend({
                obj: "",
            }, x || {});

            function initialized() {

                $(wrapper).bind('keyup', function (e) {

                    console.log($.grep(xx.obj, function (t) {
                        return t.target.split('=')[1] == $(e.target).attr(t.target.split('=')[0])
                    })[0]);


                });

            }
            initialized();
        });
    };

}(jQuery));
$('form').validate({ obj: [{ "target": "name=Username", "required": true, "xmin": "5", "xmax": "16" }, { "target": "name=Email", "required": true, "xmin": "5", "xmax": "16" }] });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form">
                    <input name="Username" placeholder="Username" />
                    <input name="Email" placeholder="Email" />
                    <input type="button" value="Save" />
                </form>

＆＃13;

＆＃13;

＆＃13;