jQuery使用ajax远程问题验证和动态添加规则。 （可能的范围？）

Question

我很难让下面的代码按预期工作：

var counter = 0;
$('#add_row').click(function(e) {

    $('input[name="user_email[' + counter + ']"]').rules("add", {
        required: true,
        email: true,
        remote: {
            url: 'process.php',
            type: 'post',
            cache: false,
            data: {
                user_email: function(Counter) {
                    return $('input[name="user_email[' + counter + ']"]').val();
                },
            },
        },
    });

    Counter++;
});

以下行返回undefined

return $('input[name="user_email[' + counter + ']"]').val();

如果没有变量Counter，它会按预期从表单输入字段返回值。但那时它已经不再充满活力了。

例如

return $('input[name="user_email[0]"]').val();

此代码有什么问题？

Answer 1

引用OP： “以下行返回undefined”

return $('input[name="user_email[' + counter + ']"]').val();

你的错误是没有实际意义的，因为这些行完全是多余的......

data: {
    user_email: function(Counter) {
        return $('input[name="user_email[' + counter + ']"]').val();
    },
},

您不需要data选项，因为remote方法默认会自动发送此字段的值。通常情况下，如果您需要发送其他数据以及字段值，例如密码字段和用户名，则会使用data选项，这显然不是这里的情况。

只需删除整个data选项。

---

您还混淆了计数器变量的区分大小写。

您有var counter，但稍后您会增加Counter++。这些拼写相同，但它们也区分大小写，因此Counter++需要更改为counter++。

---

这应该按预期工作......

var counter = 0;

$('#add_row').click(function(e) {
    $('input[name="user_email[' + counter + ']"]').rules("add", {
        required: true,
        email: true,
        remote: {
            url: 'process.php',
            type: 'post',
            cache: false
        }
    });
    counter++;
});

Answer 2

感谢您的回复。

我添加数据的意图是：发送user_email而不是user_email [？]。

我似乎已经通过以下方式实现了我想要的目标：

var input_email = $('input[name="user_email[' + counter + ']"]');
    input_email.rules("add", {
        required: true,
        email: true,

        remote: {
            url: 'process.php',
            type: 'post',
            cache: false,
           data: {
                user_email: function() {
                    return input_email.val();
                },
            },
        },
    });

    counter++;

似乎在元素名称中使用var计数器并不起作用。