最有效的表单验证

Question

我正在寻找最有效的表单验证方法，我想知道我当前的植入是否不仅可行，而且在动态缩放时是否可持续。看看：

（警告：忽略愚蠢的 HTML 类名）

// --------- Validate Required Fields ----------
$('.valid8-form').submit(function() {
  // Array to Store Errors
  $('.valid8-errors').html('');
  var formValidationErrors = [];

  if ($('.valid8-requried').val() === '' || $('.valid8-requried').val() === null) {
    formValidationErrors.push('The ' + $('.valid8-requried').name + ' field is required!');
}

  // Place Errors In List on DOM
  for (var i = 0; i < formValidationErrors.length; i++) {
    $('<li>', {
      text: formValidationErrors[i]
    }).appendTo($('.valid8-errors'));
  }
});

有没有办法在输入中为每个空白字段添加错误字符串到数组中？现在，它只在它命中的第一个空白字段的数组中抛出一个字符串。

Answer 1

对于未来的可扩展性，您需要考虑的一件事是维护验证规则集和表单设计的难易程度。这是一个很好的话题，因为没有标准的方法来做到这一点，但是有很多想法和对“最好”的追求是一个很好的想法。

我已经完成了一些工作，我使用 JSON 来定义我的表单，然后编写一个函数来为我呈现表单。这会将有关表单的信息（包括验证规则）整合到易于阅读和维护的对象定义中，如果需要，可以从数据源加载。

您可以在此处查看我在寻求标准的问题中所指的示例：Is there an accepted or emerging JSON form and field definition format?

查看那里给出的表单定义的验证属性。

所以，一个很好的问题是：我们是在寻找脚本性能效率，还是我们在寻找总体所有权效率，在哪些方面容易进行更改？如果您使用像 jquery 这样的框架来处理对 DOM 的询问，我认为前者不太重要。在大多数情况下，效率在这方面得到了关注。这就留下了一个问题：当它的增长远远超出我们的预期时，最简单的方法是什么？我认为 JSON 方法是一个值得尝试的好方法。

至于脚本效率，我可以通过基准测试告诉你，你的 for(var i=0... 比 for(var obj in objs) 快得多，所以在这方面你已经达到了脚本效率。

你可以做的一件事来提高你的效率是缓存你的 DOM 引用。

var verrors = $('.valid8-errors');
$('.valid8-form').submit(function() {
  // Array to Store Errors
  verrors.html('');
  var vrequired = $('.valid8-required');
  var formValidationErrors = [];

  if (vrequired.val() === '' || vrequired.val() ===      null) {
    formValidationErrors.push('The ' + vrequired.name + ' field     is required!');
}

  // Place Errors In List on DOM
  for (var i = 0; i < formValidationErrors.length; i++) {
    $('<li>', {
      text: formValidationErrors[i]
    }).appendTo(verrors);
  }
});

这可以防止对 DOM 进行多次查询以找到相同的对象，并且应该会稍微提高性能，尤其是在旧浏览器中。