使用jQuery Validator验证动态字段：及格分需小于满分

嘿，我来帮你搞定这个动态字段的验证需求！要让每组的及格分始终小于对应的满分，咱们可以通过jQuery Validator的自定义规则+动态字段关联来实现，具体步骤如下：

首先，你的动态生成字段要保持每组满分和及格分的ID/命名对应，比如满分输入框的ID是fmark_{id}，那对应及格分的ID就设为pmark_{id}，这样我们能通过ID的共同部分关联两组字段。及格分的HTML结构大概是这样：

<td>
  <div class="form-group">
    <input type="text" name="pmark_<?php echo $value['id'] ?>" class="form-control" id="pmark_<?php echo $value['id'] ?>" value="<?php echo $value['pass_marks'] ?>" placeholder="Enter Pass Marks">
  </div>
</td>

我们需要给jQuery Validator添加一个自定义方法，用来检查当前及格分是否小于同组的满分：

// 自定义验证规则：验证及格分小于对应满分
$.validator.addMethod("lessThanFullMark", function(value, element) {
  // 从及格分输入框的ID中提取关联的ID部分（比如pmark_123 -> 123）
  const relatedId = element.id.replace('pmark_', '');
  // 获取对应满分输入框的值
  const fullMark = $('#fmark_' + relatedId).val();
  
  // 验证逻辑：非必填时跳过，否则检查两个值都是数字且及格分小于满分
  return this.optional(element) || (!isNaN(value) && !isNaN(fullMark) && parseFloat(value) < parseFloat(fullMark));
}, "及格分必须小于满分");

因为字段是动态生成的，不能在Validator初始化时写死规则，我们可以通过rules('add')方法给所有及格分字段绑定规则：

$(document).ready(function() {
  // 初始化表单验证的基础配置
  $("#your-form-id").validate({
    errorPlacement: function(error, element) {
      // 把错误提示放到输入框所在的form-group里
      error.appendTo(element.closest('.form-group'));
    }
  });

  // 给已有的所有及格分字段添加验证规则
  $('input[name^="pmark_"]').each(function() {
    $(this).rules('add', {
      required: true,
      number: true,
      lessThanFullMark: true,
      messages: {
        required: "请输入及格分",
        number: "请输入有效的数字"
      }
    });
  });

  // 如果有动态新增字段的场景（比如点击按钮添加新的分数组），要在新增后给新的及格分字段绑定规则
  $('#add-new-score-group').on('click', function() {
    // 这里替换成你实际生成新字段的逻辑，生成后获取新的及格分输入框
    const newPassMarkInput = $('#pmark_' + newGeneratedId);
    // 给新字段添加验证规则
    newPassMarkInput.rules('add', {
      required: true,
      number: true,
      lessThanFullMark: true,
      messages: {
        required: "请输入及格分",
        number: "请输入有效的数字"
      }
    });
  });
});

如果想让用户输入时就实时验证（而不是等到提交表单），可以给满分和及格分输入框添加输入事件：

// 当满分输入框的值变化时，触发对应及格分的验证
$('input[name^="fmark_"]').on('keyup blur', function() {
  const relatedId = $(this).attr('id').replace('fmark_', '');
  $('#pmark_' + relatedId).valid();
});

// 当及格分输入框输入时，实时验证自身
$('input[name^="pmark_"]').on('keyup blur', function() {
  $(this).valid();
});

这样不管是页面加载时已有的动态字段，还是后续新增的字段，都能正确验证及格分是否小于满分啦！

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