带有 400 个输入字段的 jQuery 表单验证 [关闭]答案

【问题标题】：jQuery form validation with 400 input fields [closed]带有 400 个输入字段的 jQuery 表单验证 [关闭]
【发布时间】：2014-04-01 14:55:38
【问题描述】：

我们有一个包含约 400 个输入字段的掩码，这些字段全部加载到客户端。掩码由几个选项卡和手风琴组成，使用户能够直接查看和编辑所有必要的字段。编辑结束时，在客户端验证掩码。

我们将jQuery UI 用于制表符和手风琴，jQuery Validation Plugin 用于客户端验证。在我们运行 ASP.NET MVC 的服务器上。为了生成具有必要的data-val-* 属性的 HTML，我们使用了不同的技术：

默认的 EditorFor-helper 函数 (@Html.EditorFor(model => model.property)
特定的 TextBoxFor、DropDownListFor 辅助函数（`@Html.EditorFor(model => model.property')

自定义 HTML 标签，当我们需要特定格式时：

<input 
    class="text-box single-line" 
    data-val="true" 
    data-val-number="The field @data.Title must be a number." 
    id="@data.Name" 
    name="@data.Name" 
    type="text" 
    value="@data.Value" @(data.IsDisabled ? "disabled='disabled'" : string.Empty ) />

但是我们不使用扩展功能生成的字段看起来都非常相似，例如：

<input name="fieldName" 
       class="text-box single-line valid" 
       id="fieldName" 
       type="text" 
       value="311969d" 
       data-val="true" 
       data-val-length-max="8" 
       data-val-length="The field fieldName must be a string with a maximum length of 8.">

如果我用超过 8 个字符修改此输入的 value，该字段将标记为红色，显示和错误，并且一切正常。

但是，当我按下提交时，验证需要大约 12.5 秒 - 这是我从 IE 获得的 - 分析器：

正如我更新这个问题之前在 cmets 中提到的那样，DOM Manipulations 使执行变得非常缓慢，但我不明白为什么 jQuery-Validation 插件会向我的 HTML 页面添加新元素。在这里您可以看到执行 DOM 操作的showLabel-函数：

showLabel: function(element, message) {
    var label = this.errorsFor( element );
    if ( label.length ) {
        // refresh error/success class
        label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );

        // check if we have a generated label, replace the message then
        label.attr("generated") && label.html(message);
    } else {
        // create label
        label = $("<" + this.settings.errorElement + "/>")
            .attr({"for":  this.idOrName(element), generated: true})
            .addClass(this.settings.errorClass)
            .html(message || "");
        if ( this.settings.wrapper ) {
            // make sure the element is visible, even in IE
            // actually showing the wrapped element is handled elsewhere
            label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
        }
        if ( !this.labelContainer.append(label).length )
            this.settings.errorPlacement
                ? this.settings.errorPlacement(label, $(element) )
                : label.insertAfter(element);
    }
    if ( !message && this.settings.success ) {
        label.text("");
        typeof this.settings.success == "string"
            ? label.addClass( this.settings.success )
            : this.settings.success( label );
    }
    this.toShow = this.toShow.add(label);
},

然而，有趣的是，现在错误标签或任何类似的东西都会显示出来，或者出现在 DOM 上。此外，我们实际上不希望显示任何标签，因为掩码上没有任何空间。我们宁愿使用显示错误的工具提示文本，因为它适用于大多数现代浏览器和 HTML 5 验证。

对于短期解决方案，如果我们能以某种方式禁用（仅针对此掩码）DOM 操作会很好。是否可以进行一些配置？

更复杂的解决方案是使用 HTML 5 验证而不是 JavaScript，因为我们的客户现在已经使用 IE 9 或 10，如果需要，他们可以升级到支持它的 10。我从去年 11 月发现了一个关于它的 SO 问题：ASP.NET MVC 5 and HTML 5 form attributes according to the W3C specs - 也许某些事情已经改变或将以这种方式改变？由于手动实现所有字段将是太多的工作。

【问题讨论】：

验证需要什么？除非您的客户使用 1990 年代初期的计算机，否则 20 秒对于简单的 JavaScript 字段验证来说是非常长的时间。
以上两个^^但是你能不能在离开字段的时候不验证，给验证失败的字段添加一个类？然后你可以简单地做if ($(".fail-validation").length) { // validation failed }（例如）
即使对于 500 个字段来说，20 秒听起来也很过分，但这完全取决于要验证的内容。在此过程中是否正在修改 DOM？
听起来是时候进行一些重构了...成为一个不错的基于 Ajax/Wizard 的系统，这样您就不会被大量荒谬的输入字段淹没您的用户。
这已经被重构了。它有 6 个不同的选项卡和额外的手风琴，因此用户可以有效地选择要查看的数据。

标签： jquery asp.net-mvc jquery-validate unobtrusive-validation html5-validation

【解决方案1】：

您需要支持哪些浏览器？对于较新的浏览器，您可以使用HTML5 form validation 例如：

<form>
  <label for="choose">Would you prefer a banana or a cherry?</label>
  <input id="choose" name="i_like" pattern="banana|cherry">
  <button>Submit</button>
</form>

作为旧浏览器的后备方案，您可以包含验证脚本。

【讨论】：

【解决方案2】：

我会一次验证一个字段集。

每次用户打开一个窗格，然后在该窗格的某个字段中输入一些数据时，该窗格将被标记为“脏”。现在，当用户继续打开另一个窗格时，他将无法“离开”，直到他修复了对当前窗格上的字段提出的任何验证要求。

这样，验证将在离散的部分进行，避免不必要的往返于用户甚至没有触及的字段。

【讨论】：