如何使用Parsley.js实现表单整体校验？

我来分享一个基于Parsley.js实现这类整体表单校验的最优方案，刚好之前处理过类似的范围关联校验需求，完美适配你提到的“字段级校验已完成，需校验范围递增、无间隔、覆盖指定整体范围”的场景。

1. 准备工作：标识表单与字段 #

首先给表单和字段加上便于识别的标识，方便后续获取值和绑定校验：

• 给目标表单添加id和存储整体范围的data属性，比如：

  <form id="range-form" data-full-range="1-10">
    <!-- 已完成字段级校验的输入框，统一加上class -->
    <input type="text" class="range-field" parsley-pattern="^\d+(-\d+)?$" required>
    <input type="text" class="range-field" parsley-pattern="^\d+(-\d+)?$" required>
    <input type="text" class="range-field" parsley-pattern="^\d+(-\d+)?$" required>
    <input type="text" class="range-field" parsley-pattern="^\d+(-\d+)?$" required>
    <input type="text" class="range-field" parsley-pattern="^\d+(-\d+)?$" required>
    <button type="submit">提交</button>
  </form>
  

  这里的parsley-pattern是字段级校验，确保输入是单个数字或数字-数字的格式，和你已完成的字段校验逻辑对齐。

2. 核心逻辑：解析范围与校验规则 #

先写两个核心工具函数：

• 解析单个字段值：把输入的“数字”或“数字-数字”转换成包含start和end的对象，单个数字的话start和end相同：

  function parseRangeValue(value) {
    const parts = value.split('-');
    if (parts.length === 1) {
      const num = parseInt(parts[0], 10);
      return { start: num, end: num };
    } else {
      return {
        start: parseInt(parts[0], 10),
        end: parseInt(parts[1], 10)
      };
    }
  }
  

• 校验整体规则：接收所有字段的范围数组和整体范围，检查三个条件：
  1. 所有范围严格按顺序递增（后一个范围的起始值 = 前一个范围的结束值 + 1）
  2. 第一个范围的起始值等于整体范围的起始值
  3. 最后一个范围的结束值等于整体范围的结束值

  function validateRangeSet(rangeList, fullRange) {
    // 解析整体范围
    const [fullStart, fullEnd] = fullRange.split('-').map(num => parseInt(num, 10));
    
    // 检查起始和结束是否匹配整体范围
    if (rangeList[0].start !== fullStart || rangeList[rangeList.length - 1].end !== fullEnd) {
      return { valid: false, message: '范围未完全覆盖指定的整体范围' };
    }
    
    // 检查相邻范围是否连续无间隔
    for (let i = 0; i < rangeList.length - 1; i++) {
      const current = rangeList[i];
      const next = rangeList[i + 1];
      if (current.end + 1 !== next.start) {
        return { valid: false, message: `第${i+2}个范围与前一个范围存在间隔，请检查` };
      }
    }
    
    return { valid: true, message: '' };
  }
  

3. 自定义Parsley表单级校验器 #

Parsley支持自定义表单级校验，我们把上面的逻辑封装成校验器，绑定到表单上：

// 添加自定义表单校验器
window.Parsley.addValidator('completeRangeSet', {
  requirementType: 'string', // 接收整体范围字符串
  validateString: function(_, formInstance) {
    // 获取所有范围字段的值
    const fieldValues = formInstance.$element.find('.range-field').map(function() {
      return $(this).val();
    }).get();
    
    // 解析所有字段为范围对象
    const rangeList = fieldValues.map(val => parseRangeValue(val));
    
    // 执行校验逻辑
    const result = validateRangeSet(rangeList, formInstance.$element.data('full-range'));
    
    // 如果校验失败，设置错误提示
    if (!result.valid) {
      formInstance.addError(result.message, { type: 'custom', namespace: 'completeRangeSet' });
    }
    
    return result.valid;
  },
  messages: {
    en: '范围校验未通过',
    zh: '范围校验未通过'
  }
});

// 初始化表单校验，绑定自定义校验器
$('#range-form').parsley({
  validators: {
    completeRangeSet: window.Parsley.validators.completeRangeSet
  }
}).on('form:validate', function() {
  // 触发自定义校验
  this.validate('completeRangeSet');
});

4. 关键细节说明 #

• 字段顺序依赖：这个方案假设字段是按从左到右的顺序对应范围的递增顺序（比如字段1对应最左侧的范围，字段5对应最右侧），如果你的字段顺序可能变化，可以在字段上添加data-order属性，排序后再校验。
• 错误提示优化：可以根据校验失败的具体原因，显示更精准的提示（比如“缺失数字4”），只需要在validateRangeSet函数中计算间隔的数字即可。
• 与字段级校验的兼容性：因为是表单级校验，会在所有字段级校验通过后才执行，完全不影响你已有的字段校验逻辑。

这个方案的优势在于：

• 完全基于Parsley.js的扩展机制，和原生校验流程深度融合
• 核心逻辑抽成独立函数，便于维护和复用
• 错误提示可以灵活定制，提升用户体验

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