jquery - 结合 JQuery 验证和 ajax post

Question

我确信这很简单，但我是 JQuery 新手。我正在使用 JQuery 插件来验证电子邮件地址，这有效，代码是:

$(document).ready(function () {
    $("#email").click(function () {
        $(this).attr({value: ''});
    });
    $("#subscribe-form").validate();
});

然后我想做的是使用 ajax post 发布电子邮件地址，同样，此代码在没有验证器的情况下也可以正常工作:

$(document).ready(function () {
    $('#submit').click(function () {
        var email = $('#email').val();
        var data = "email=" + email;
        $.ajax({
            type: "POST",
            url: "subscript.php",
            data: data,
        });
    });
});

我似乎无法将它们结合起来，这样如果电子邮件有效，它就会发布。我非常感谢有关如何执行此操作的帮助。

非常感谢

Answer 1

.validate() 可以通过传入具有各种配置选项的对象来配置。在这种情况下，设置submitHandler通过回调您的表单提交代码应该可以完成这项工作。

我还稍微清理了您的示例代码，以向您展示如何编写更惯用的 jQuery。

1. 我用过jQuery.post()而不是jQuery.ajax()因为 jQuery.ajax() 是一个低级方法，仅在您想要自定义 AJAX 请求的行为时使用，就像我们自定义 .validate 的行为一样()。

2. 表单的所有输入都可以通过调用.serialize()来准备发布。 。这准备了URL encoded键值字符串，如 name=John+Doe&email=john%40doe.com，然后可以用作 POST 的数据。

<强> Example

$(document).ready(function() {
    $('#myForm').validate({
        submitHandler: function(form) {
            $.post('subscript.php', $('#myForm').serialize());
        }
    });
});