最有效的表单验证

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'));
  }
});

是否有一种方法可以在输入中将forEach空白字段添加到数组中的错误字符串？现在，它只在数组中抛出一个字符串，作为它命中的第一个空白字段。

Answer 1

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

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

您可以看到我在这里寻求标准的问题中提到的一个例子：是否有一种被接受的或新兴的JSON表单和字段定义格式？

请参阅此处给出的表单定义上的验证属性。

所以，一个很好的问题是：我们是在寻找脚本性能效率，还是在寻找总所有权效率，在那里很容易做出改变？我认为如果您使用jQuery这样的框架来处理DOM的询问，前者就不那么重要了。在这方面，效率在很大程度上得到了重视。这就留下了一个问题：当它远远超出我们的预期时，保持它的最简单的方法是什么？我认为JSON方法是一个值得尝试的好方法。

至于脚本效率，我可以通过基准测试告诉您，for（var I=0…远远快于for（objs中的var obj），因此在这方面，您已经实现了脚本效率。

要提高效率，可以做的一件事是缓存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的多个查询找到同一个对象，并且应该会稍微提高性能，尤其是对于较旧的浏览器。