新手求教：为支持增删行的DataTables添加客户端验证的标准方案？

嘿，我懂你的烦恼——在这套偏老旧的组件组合（DataTables 1.9.4 + jQuery Validation 1.11.1 + Jeditable 1.7.1）里找通用的行增删验证方案，确实容易搜不到现成的官方集成，毕竟这些版本都比较早，后续的新特性和插件都没覆盖到。不过结合这些组件本身的能力，还是有几个接近“标准实现”的思路可以试试，不用完全从零写定制代码：

• Jeditable + jQuery Validation 联动验证
  既然你用Jeditable做行内编辑，完全可以在Jeditable的回调钩子中嵌入Validation逻辑。比如在onsubmit阶段，对当前编辑的单元格输入值做校验：

  $('.editable').editable(function(value, settings) {
    // 用jQuery Validation的方法校验输入值
    var isValid = $.validator.methods.required.call(this, value, this);
    if (!isValid) {
      // 校验不通过时提示，阻止提交
      $(this).addClass('error');
      return false;
    }
    $(this).removeClass('error');
    return value;
  }, {
    type: 'text',
    onblur: 'submit'
  });
  

  你也可以根据字段类型，调用Validation里的email、number等内置校验方法，不用自己写正则。

• 新增行后动态绑定验证规则
  当你通过DataTables新增一行时，遍历新行里的所有输入字段，用jQuery Validation的rules('add')方法给每个字段绑定规则，比如：

  // 假设新增行的选择器是.new-row
  $('.new-row input').each(function() {
    $(this).rules('add', {
      required: true,
      messages: {
        required: '此字段不能为空'
      }
    });
  });
  // 提交/保存时校验整行
  if (!$('.new-row').valid()) {
    return false; // 阻止后续操作
  }
  

  这个方法利用了jQuery Validation 1.11.1支持动态添加规则的特性，能快速给新增行批量加校验。

• 借助DataTables的渲染钩子初始化验证
  DataTables 1.9.4提供了fnRowCallback钩子，可以在每行渲染完成后，给行内的输入元素初始化验证：

  $('#dataTable').dataTable({
    fnRowCallback: function(nRow, aData, iDisplayIndex) {
      // 给当前行的输入框绑定验证
      $(nRow).find('input').each(function() {
        $(this).rules('add', {
          required: true,
          number: true,
          messages: {
            required: '必填项不能为空',
            number: '请输入有效的数字'
          }
        });
      });
      return nRow;
    }
  });
  

  这个方式能确保无论是初始加载的行还是后来新增的行，渲染后都会自动带上校验规则，不用手动重复绑定。

虽然没有官方的一站式集成插件，但这几个思路都是基于组件本身的原生能力，算是适配这套老旧栈的“准标准”实现，比完全手写校验逻辑要省心不少。

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