如何用Parsley校验不同name的复选框至少勾选一个？

嘿，这个场景我之前也碰到过，Parsley默认的mincheck校验是基于相同name属性的元素组设计的，所以当每个复选框name不一样时，默认规则自然就失效了。不过别担心，我们可以通过自定义校验器+data-parsley-group分组的方式轻松搞定，而且完全适配长列表的情况。

方法一：自定义分组校验器（推荐） #

步骤1：给复选框添加分组标识 #

给所有需要校验的复选框加上data-parsley-group="hobbies"（分组名可以随便取），这样我们就能通过这个分组统一定位所有目标复选框：

<form id="hobbyForm">
  <input type="checkbox" name="hobbies1" value="reading" data-parsley-group="hobbies"> 阅读
  <input type="checkbox" name="hobbies2" value="running" data-parsley-group="hobbies"> 跑步
  <input type="checkbox" name="hobbies3" value="coding" data-parsley-group="hobbies"> 编程
  <!-- 更多复选框... -->
  <button type="submit">提交</button>
</form>

步骤2：注册自定义Parsley校验器 #

在JS里注册一个自定义校验规则，专门用来检查指定分组下的复选框是否至少有一个被选中：

// 注册自定义校验器
window.Parsley.addValidator('atLeastOneInGroup', {
  validateString: function(_value, groupName) {
    // 获取分组下所有复选框
    const checkboxes = document.querySelectorAll(`[data-parsley-group="${groupName}"]`);
    // 判断是否有至少一个被选中
    return Array.from(checkboxes).some(checkbox => checkbox.checked);
  },
  requirementType: 'string',
  messages: {
    en: 'Please select at least one option from this group.',
    zh: '请至少选择一个选项。'
  }
});

步骤3：绑定校验规则 #

你可以给任意一个复选框加上校验规则（Parsley会自动关联整个分组），比如给第一个复选框添加：

<input type="checkbox" name="hobbies1" value="reading" 
       data-parsley-group="hobbies"
       data-parsley-at-least-one-in-group="hobbies">

最后初始化表单的Parsley校验：

document.getElementById('hobbyForm').addEventListener('submit', function(e) {
  e.preventDefault();
  this.parsley().validate();
  if (this.parsley().isValid()) {
    // 校验通过，执行提交逻辑
    console.log('校验通过！');
  }
});

方法二：直接通过class选择器校验（无需分组） #

如果不想用分组，也可以给所有目标复选框加统一class，直接通过class定位校验：

步骤1：给复选框加统一class #

<form id="hobbyForm">
  <input type="checkbox" name="hobbies1" value="reading" class="hobby-checkbox"> 阅读
  <input type="checkbox" name="hobbies2" value="running" class="hobby-checkbox"> 跑步
  <!-- 更多复选框... -->
  <button type="submit">提交</button>
</form>

步骤2：注册自定义校验器 #

window.Parsley.addValidator('atLeastOneHobby', {
  validateString: function(_value) {
    const checkboxes = document.querySelectorAll('.hobby-checkbox');
    return Array.from(checkboxes).some(checkbox => checkbox.checked);
  },
  messages: {
    en: 'Please select at least one hobby.',
    zh: '请至少选择一个爱好。'
  }
});

步骤3：绑定校验到表单 #

直接给表单添加校验规则即可：

<form id="hobbyForm" data-parsley-at-least-one-hobby>

注意事项 #

• 两种方法都支持Parsley的实时校验（只要你开启了相关配置），提交时也会自动触发校验。
• 对于超长列表，这两种方法的性能都没问题，querySelectorAll和some方法的开销极小。

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