Question

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

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

默认的EditorFor-helper函数（@Html.EditorFor(model => model.property）
特定的TextBoxFor，DropDownListFor辅助函数（`@ Html.EditorFor（model =＆gt; model.property＆＃39;）

自定义HTML标记，当我们需要特定格式ex：

时

<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浏览器获取的内容：

IE-profiler screenshot of one validation round executed

正如我在更新此问题之前的评论中提到的那样，DOM操作使执行速度极慢，但我不明白为什么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上。此外，我们实际上并不想显示任何标签，因为面具上没有任何空间。我们宁愿使用显示错误的ToolTip文本，因为它适用于大多数现代浏览器和HTML 5验证。

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

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

Answer 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>

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

Answer 2

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

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

这样，验证将在离散部分进行，避免对用户甚至不触摸的字段进行无意义的往返。

jQuery表单验证，包含400个输入字段

2 个答案: