JQuery Validation - 如何在“远程”方法中正确检索表单字段值？

Question

使用 jQuery 验证插件，我一直在尝试检索表单的输入字段值，将其与一些 url 前缀连接以生成 REST url，然后通过 remote 方法向生成的 url 发出 GET 请求。

下面是REST接口的方法（服务器端是java）

@Path("/user")
public interface UserResource {

    @GET
    @Path("/registered/email/{value}")
    public boolean isRegistered(@PathParam("value") String value);
}

这是要验证的输入字段的样子

<form id="registerForm" action="/register" method="POST">
    <input class="form-control" id="email" name="email" type="email" value='${email}' required/>
    ...
</form>

然后是 jQuery 验证脚本；

$('body #registerForm').validate({
    rules : {
        'email': {
            required: true,
            email: true,
            remote: "/user/registered/email/" + $(this).find('#email').val()
        },
    },
    messages : {
        'email': {
            required: 'Please enter your email address',
            email: 'Please provide a valid email address',
            remote: 'Email has already been taken',
        },
    },
});

请注意传递给remote 方法的值是简单的REST url，因为根据http://jqueryvalidation.org/remote-method/，默认请求type 是GET...还要注意@987654328 如何@ 和 data 未指定，因为在这种情况下不一定需要它们。

目标： ...现在，假设用户输入的电子邮件是 username@email.com 我通常希望生成的 url 如下所示；

http://localhost:8080/user/registered/email/username@email.com

问题： ...但是这就是我得到的；

http://localhost:8080/user/registered/email/?email=username@email.com

问题： ...注意网址中username@email.com之前的?email=...我想知道为什么$(this).find('#email').val() 被连接为查询参数？...请有人向我解释为什么会这样吗？..还有我该如何解决这个问题？

谢谢。

Answer 1

目标：...现在，假设用户输入的电子邮件是 username@email.com，我通常希望生成的 url 如下所示；

http://localhost:8080/user/registered/email/username@email.com

问题：......但我得到的却是这样的；

http://localhost:8080/user/registered/email/?email=username@email.com

这里有两个问题。第一个是 validate 方法在执行时解析 url 路径 - 默认情况下不会动态重新检查。当它运行时，基本上是在呈现表单时，您的电子邮件输入字段为空。因此，路径被解析为 'http://localhost:8080/user/registered/email/' + '' （您开始使用的静态字符串，与空输入字段中的空字符串连接）。

第二个问题是 jQuery.validate 的远程方法默认发送已验证字段的“名称”和“值”属性作为查询参数——当然，这不是 REST 的处理方式。这些被扁平化为“?email=username@email.com”，它位于 URL 的其余部分之后，因为它在第一步中已解析。

要解决第一个问题并构建一个值得 REST 使用的路径，您必须将构建的 URL 包装在一个函数中，该函数将在每次请求对该输入进行验证时执行。

$('body #registerForm').validate({
    rules : {
        'email': {
            required: true,
            email: true,
            remote: function() {
                return '/user/registered/email/' + $('#email').val()
            }
        }
    }
});

这将产生一个正确的 REST API url，尽管它仍然会附加查询字符串。它看起来像这样：

http://localhost:8080/user/registered/email/username@email.com?email=username@email.com

当然，这很难看，但您的 API 很可能会默默地忽略查询字符串，并按预期执行。

但是为了获得更干净、更 RESTful 的 url，需要重新设置 ajax 调用的 data 属性。为此，您可以让第一步中的远程函数返回一个对象，并将之前的 url 字符串作为 url 参数，并将数据参数设置为空字符串。

$('body #registerForm').validate({
    rules : {
        'email': {
            required: true,
            email: true,
            remote: function() {
                return {
                    url: '/user/registered/email/' + $('#email').val(),
                    data: ''
                }
            }
        }
    }
});

这将产生所需的 RESTful url

http://localhost:8080/user/registered/email/username@email.com

Answer 2

QUESTION：...注意网址中的?email= before username@email.com...我想知道为什么$(this).find('#email').val() 的结果被连接为查询参数？...请有人解释一下对我来说为什么会这样？.. 还有我该如何解决这个问题？

默认情况下，查询字符串?field="value"&field2="value2".... 正是与GET 请求一起发送数据的方式。通常，您不会使用 URL 段在服务器端获取此值，只需使用 GET 数组即可。

The jQuery Validate plugin's remote method 使用与 jQuery .ajax() 相同的选项。参考the .ajax() documentation...

数据
类型：PlainObject 或 String 或 Array
要发送到服务器的数据。 如果还不是字符串，则将其转换为查询字符串。它附加到 GET 请求的 url。 请参阅processData 选项以防止这种自动处理。对象必须是键/值对。如果 value 是一个 Array，jQuery 会根据传统设置的 value 序列化多个具有相同 key 的值（如下所述）。

...

processData（默认：true）
类型：Boolean
默认情况下，作为对象（从技术上讲，是字符串以外的任何内容）传入数据选项的数据将被处理并转换进入查询字符串，适合默认的内容类型“application/x-www-form-urlencoded”。如果要发送 DOMDocument 或其他未处理的数据，请将此选项设置为 false。

---

OP 标题： JQuery Validation - 如何在“远程”方法中正确检索表单字段值？

要获取该字段的值，只需选择该字段并将其附加到 jQuery .val()。不用$(this).find(...

$('#email').val()

---

试试这个...

rules : {
    'email': {
        required: true,
        email: true,
        remote: {
            url: "/user/registered/email/" + $('#email').val(),
            processData: false
        }
    },
},

Answer 3

您正在向您网站上的文件夹或位置发出获取请求。您需要提供一个执行检查的脚本。所以你的远程 url 应该类似于“/user/registered/email/check_email.php”。

此外，GET 请求的整个想法是参数作为名称/值对传递，这些对在“？”之后附加到查询字符串上。分隔器。见http://www.w3schools.com/tags/ref_httpmethods.asp。您没有提供实际的远程脚本，也没有为您的值提供参数名称，因此您只需获取 url +“？” + 你的价值。

最后，我建议您使用 POST 方法。在您提供链接的资源中，查看第二个示例。它向您展示了如何指定 POST。

这一切有意义吗？

Answer 4

我使用此代码来解决 REST 服务问题：

$("#mailingAddress").rules("add", {
    required: true,
    remote: function () { 
        var r = {
            url: "/Api/Address/ValidateAddressSimple/" + $("#mailingAddress").val(),
            type: "post",
            cache: false,
            dataFilter: function (response)
            {
                return response;
            }
        };
        return r;
    },
    messages: {
        remote: "* not valid"
    }
});

取自这篇文章：https://stackoverflow.com/a/22467664