如何用jQuery Validate验证必须选中至少一个data-score≥70的复选框？

需求说明：需验证一组name为user_ids[]的用户复选框，满足两个条件：

• 至少选中一个用户
• 选中的用户中至少有一个data-score属性值≥70

现有代码仅实现了第一个条件，以下是修改方案：

原有代码 #

HTML #

<input type="checkbox" value="1" name="user_ids[]" id="user_ids_1" data-score="50">
<input type="checkbox" value="2" name="user_ids[]" id="user_ids_2" data-score="80">
<!-- 更多复选框... -->

JS（仅验证至少选一个） #

$("form#coolForm").validate({
  rules: {
    'user_ids[]': {
      required: true,
      minLength: 1,
    }
  }
});

修改后的实现方案 #

1. 自定义验证方法 #

通过$.validator.addMethod添加一个自定义规则，用于检查选中的用户中是否存在高分用户：

$.validator.addMethod("hasHighScoreUser", function(value, element) {
  // 遍历所有选中的user_ids[]复选框
  const checkedUsers = $("input[name='user_ids[]']:checked");
  if (checkedUsers.length === 0) {
    return false; // 没选中任何用户，直接不通过
  }
  // 检查是否有用户的data-score≥70
  return checkedUsers.toArray().some(user => parseInt($(user).data("score"), 10) >= 70);
}, "选中的用户中至少需要包含一名评分≥70的用户");

2. 更新表单验证规则 #

把自定义规则加到user_ids[]的验证规则中，同时保留原有必填规则：

$("form#coolForm").validate({
  rules: {
    'user_ids[]': {
      required: true,
      hasHighScoreUser: true
    }
  },
  messages: {
    'user_ids[]': {
      required: "请至少选择一名用户"
    }
  }
});

完整代码示例 #

<form id="coolForm">
  <input type="checkbox" value="1" name="user_ids[]" id="user_ids_1" data-score="50"> 用户1（评分50）
  <input type="checkbox" value="2" name="user_ids[]" id="user_ids_2" data-score="80"> 用户2（评分80）
  <input type="checkbox" value="3" name="user_ids[]" id="user_ids_3" data-score="65"> 用户3（评分65）
  <button type="submit">提交</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script>
$.validator.addMethod("hasHighScoreUser", function(value, element) {
  const checkedUsers = $("input[name='user_ids[]']:checked");
  if (checkedUsers.length === 0) return false;
  return checkedUsers.toArray().some(user => parseInt($(user).data("score"), 10) >= 70);
}, "选中的用户中至少需要包含一名评分≥70的用户");

$("form#coolForm").validate({
  rules: {
    'user_ids[]': {
      required: true,
      hasHighScoreUser: true
    }
  },
  messages: {
    'user_ids[]': {
      required: "请至少选择一名用户"
    }
  }
});
</script>

说明：

• 自定义方法hasHighScoreUser会先判断是否有选中的用户，再检查其中是否存在评分≥70的用户
• 错误提示可根据需求自行修改
• 需确保已引入jQuery和jQuery Validate的依赖文件

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