jQuery 验证 — 需要一个具有特定数据属性的特定选择

Question

我试图弄清楚如何使用 jQuery validate 来验证特定场景。用户必须从一组用户中选择至少一个用户，但列表中的每个用户都有一个代表分数的

data

属性，比方说 0-100；假设他们必须选择至少 1 个得分超过 70 分的用户。例如...

<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">
etc...

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

这将需要至少选择一名用户，但是有没有办法要求选择一名用户，其中

elem.data('score') >= 70

？

Answer 1

我想我已经找到答案了

您需要向验证器添加一个方法并获取要比较的分数，参数是要比较的数字并返回 true 或 false（在此示例中，如果 HTML 元素数据分数等于或高于 50都会过去的。

$.validator.addMethod("checkScore", function(value, element, params) {
        const score = $(element).data("score");
        console.log(params);
    console.log(score);
    return score >= params;
}, "This is your custom validation error message");

您可以在这里查看示例：

$.validator.addMethod("checkScore", function(value, element, params) {
        const score = $(element).data("score");
        console.log(params);
    console.log(score);
    return score >= params;
}, "This is your custom validation error message");

$(document).ready(function() {
    $('#myform').validate({
        rules: {
            "user_ids][]": {
                checkScore: 50
            },
        },
        errorPlacement: function(error, element) {
            error.insertBefore(element);
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.js"></script>
<form id="myform">
  <input type="checkbox" value="1" name="user_ids][]" id="user_ids_1" data-score="40">
<br/>
<input type="text" name="textfield">
<br/>
<input type="submit">
</form>