Question

我发现本教程使用jQuery和验证插件来验证表单输入。请在此处查看工作示例。 http://jsfiddle.net/nK7Pw/ 这似乎工作正常，但我有一个问题，在HTML部分，没有提到错误类，那么代码如何在每个字段前面显示错误？ jQuery部分也没有这样的解释。谢谢你解释。

Answer 1

这一切都是由验证插件在内部完成的。

errorClass: "error",
errorElement: "label",

它定义了发生错误时要放在DOM中的默认类和对象。

它有一个内部调用的错误放置函数。它将遍历错误列表，然后在元素＆amp;上调用showLabel。消息

defaultShowErrors: function() {
            for ( var i = 0; this.errorList[i]; i++ ) {
                var error = this.errorList[i];
                this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
                this.showLabel( error.element, error.message );
            }

然后它出现并运行showLabel函数。

showLabel: function(element, message) {
            var label = this.errorsFor( element );
            if ( label.length ) {
                // refresh error/success class
                label.removeClass().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 || "");

为IE显示标签

做了一些额外的麻烦

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

就在这里，我们有DOM插入代码。

                if ( !this.labelContainer.append(label).length )
                    this.settings.errorPlacement
                        ? this.settings.errorPlacement(label, $(element) )
                        : label.insertAfter(element);
            }

这一切都是从jQuery.validation源粘贴的。如果其他不清楚的地方随意问。只搜索文件并阅读源代码应该有所帮助。我只是搜索“错误”

Answer 2

它会在每个有错误的label元素之后放置自己的input元素。

实施例

<label for="email" generated="true" class="error">
  Please enter a valid email address
</label>

您可以使用errorPlacement回调进行配置，如此...

$('form').validate(
   errorPlacement: function(error, element) {
      element.before(error);
   }
);

您可以使用DOM检查器工具查看放置的新HTML。 Firebug for Firefox，内置Safari和Chrome。即使IE8也有一个。

jQuery验证代码如何工作

2 个答案:

实施例