parsley.js带多参数的远程验证实现及服务器响应格式问题

我正在使用Parsley.js，想要集成服务器端验证功能，检查输入值是否已存在于数据库中。服务器端需要获取输入值之外的额外参数（示例中为obj-id和site-id）。我不确定该选哪种实现方案，觉得自定义远程验证可能是正确方向，但不清楚服务器的响应格式应该是什么样的。

示例代码 #

HTML代码 #

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>parsley.js Remote Validation</title>
  </head>
  <body>
    <h1>parsley.js Remote Validation</h1>
    <label for="name" class="form-label sr-only">Name</label>
    <input id="name" class="form-control" name="tag[name]" required 
           data-obj-id="200" data-site-id="100"
           data-parsley-remote
           data-parsley-remote-validator='check-dupliate'
           data-parsley-required-message="Please enter a name!"
     >
     <button type="button" class="btn btn-success btn-save">Save</button>
  </body>
</html>

JS代码 #

$('#name').parsley();

$(document).on('click', '.btn-save', function()
{
    if ($('#name').parsley().validate() === true)
    {
    console.log('do stuff');
  }
});

window.Parsley.addAsyncValidator('check-dupliate', function (xhr)
{
    $element = this.$element;
  console.log($element.data('obj-id'));
  console.log($element.data('site-id'));
  return 404 === xhr.status;
}, document.URL, );

解决方案 #

1. 自定义异步验证器的正确配置 #

你选择自定义异步验证器的方向完全正确，核心是要把obj-id和site-id这两个额外参数传递给服务器，以下两种方式均可实现：

方式一：拼接URL参数（GET请求）

修改验证器的URL生成逻辑，动态拼接参数：

window.Parsley.addAsyncValidator('check-duplicate', function(xhr) {
  // 404表示值不存在（验证通过），200表示已存在（验证失败）
  return xhr.status === 404;
}, function() {
  const $element = this.$element;
  // 编码参数避免URL解析问题
  return `${document.URL}?name=${encodeURIComponent($element.val())}&obj-id=${$element.data('obj-id')}&site-id=${$element.data('site-id')}`;
});

方式二：POST请求传递参数

如果需要用POST提交数据，可通过配置请求数据实现：

window.Parsley.addAsyncValidator('check-duplicate', function(xhr) {
  return xhr.status === 404;
}, document.URL, {
  type: 'POST',
  dataType: 'json',
  data: function() {
    const $element = this.$element;
    return {
      name: $element.val(),
      'obj-id': $element.data('obj-id'),
      'site-id': $element.data('site-id')
    };
  }
});

2. 服务器端响应规则 #

Parsley.js的远程验证依赖HTTP状态码判断结果，规则清晰：

• 返回404状态码：验证通过（输入值不存在于数据库）
• 返回200状态码：验证失败（输入值已存在）

如果需要自定义错误提示，服务器可以在返回200时附带JSON数据（比如{"msg": "该名称已被使用"}），然后在验证器中处理：

window.Parsley.addAsyncValidator('check-duplicate', function(xhr) {
  if (xhr.status === 200) {
    // 自定义错误消息
    this.addError('duplicate', JSON.parse(xhr.responseText).msg);
    return false;
  }
  return xhr.status === 404;
}, function() {
  const $element = this.$element;
  return `${document.URL}?name=${encodeURIComponent($element.val())}&obj-id=${$element.data('obj-id')}&site-id=${$element.data('site-id')}`;
});

3. 修正HTML属性拼写错误 #

注意你的HTML中data-parsley-remote-validator的值拼写错误（check-dupliate少了一个c），需改为check-duplicate，确保和JS中注册的验证器名称一致：

<input id="name" class="form-control" name="tag[name]" required 
       data-obj-id="200" data-site-id="100"
       data-parsley-remote
       data-parsley-remote-validator='check-duplicate'
       data-parsley-required-message="Please enter a name!"
       data-parsley-duplicate-message="该名称已存在"
>

内容的提问来源于stack exchange，提问作者Phantom