使用 jquery 的 Ajax 验证？答案

【问题标题】：Ajax Validation Using jquery?使用 jquery 的 Ajax 验证？
【发布时间】：2011-01-14 02:41:16
【问题描述】：

我使用 jquery 验证插件。

在我的表单中，我需要检查昵称是否已在使用中。

为此，他们提供了remote 键来进行 ajax 调用。对我来说，ajax 调用正在工作正确并返回真或假。但即使返回值为假，它也允许，这不应该发生。

我的验证码看起来像，

$(function() {
    $("#myform").validate({
        rules: {
            fullName: {
                required: true,
                minlength: 5
            },
            nickName: {
                required: true,
                minlength: 4,
                alphaNumeric: true,
                remote: {
                    url: "NickNameChecker",
                    type: "post",
                    data: {
                        nickName: function() {
                        return $("#nickName").val();
                    }},
                    success: function(data) {
                        return data;
                    }
                }
            }
        },
        messages: {
            fullName: {
                required: "Please Enter Your Full Name.",
                minlength: "Full Name should have minimum 5 letters."
            },
            nickName: {
                required: true,
                minlength: "Nick Name should contain minimum 4 letters.",
                remote: "This nickname is already in use."
            }
        }
    });
});

任何建议都将不胜感激！！！

谢谢！

解决方案：

解决方案仅在我的代码中。

我刚刚删除了成功部分并尝试了。效果很好！

【问题讨论】：

远程页面的返回值是多少？
@Cybernate：如果 nick 不在使用中 true 否则 false
@TamilVendhan：不是remote 选项的专家，但我能找到的示例都没有显示指定了success 选项。
@Andrew Whitaker：给我这些例子。我会努力关注他们的。
虽然客户端检查有利于用户体验，但请确保您有一个数据库规则来强制昵称的唯一性，否则您只是在等待竞争条件

标签： jquery ajax validation

【解决方案1】：

（以上评论的扩展解释）：

success 选项对 jQuery validate 的远程验证无效。您应该能够只指定一个 URL 来访问以进行返回 true 或 false 值/错误消息的验证：

服务器端资源通过以下方式调用 $.ajax (XMLHttpRequest) 并得到一个键/值对，对应于已验证元素的名称及其值作为 GET 参数。响应被评估为 JSON 并且必须为真对于有效元素，可以是任何 false、未定义或 null 表示无效元素，使用默认消息；或字符串

有关如何使用该选项的更多信息，请参阅documentation for remote。您的代码可能看起来像这样：

$(function() {
    $("#myform").validate({
        rules: {
            fullName: {
                required: true,
                minlength: 5
            },
            nickName: {
                required: true,
                minlength: 4,
                alphaNumeric: true,
                remote: {
                    url: "NickNameChecker",
                    type: "post",
                    data: {
                        nickName: function() {
                        return $("#nickName").val();
                    }
                }
            }
        },
        messages: {
            fullName: {
                required: "Please Enter Your Full Name.",
                minlength: "Full Name should have minimum 5 letters."
            },
            nickName: {
                required: true,
                minlength: "Nick Name should contain minimum 4 letters.",
                remote: "This nickname is already in use."
            }
        }
    });
});

【讨论】：

【解决方案2】：

jQuery 验证团队提出了另一种处理非布尔 API 的方法in this GitHub issue。

建议的方法利用了jQuery.ajax() 的 dataFilter 属性。

form.validate({
    rules: {
        username: {
            required: true,
            remote: {
                url: "users2.json.php",
                dataFilter: function(data) {
                    var json = JSON.parse(data);
                    if(json.status === "success") {
                        return '"true"';
                    }
                    return "\"" + json.error + "\"";
                }
            }
        }
    }
});

【讨论】：