jQuery验证代码如何工作 [英] how jQuery validation code works

问题描述

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

I found this tutorial which uses jQuery and validation plugin to validate form input. Please see the working example here. http://jsfiddle.net/nK7Pw/ This seem to work fine, however I have a question that in the html part, there is no where mentioned error class, then how does the code displays the error just in front of each field? There is no such explanation in the jQuery part too. Thanks for explaining.

推荐答案

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

It's all done internally by the validation plugin.

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

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

It defines default classes and objects to place in the DOM when an error occurs.

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

It has an error placement function called internally. It will loop through the error list and then call showLabel on the element & message

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函数。

Then it comes along and runs the showLabel function.

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

如果标签已经存在然后它将刷新错误类并在标签中设置新消息。

If the label already exists Then it will refresh the error class and set the new message in the label.

如果它不存在，那么我们创建一个。它有一个很大的构造块，设置属性和类以及消息。

If it didnt exist then we make one. It has a large constructor block, setting the attribute and the class as well as the message.

            } else {
                // create label
                label = $("<" + this.settings.errorElement + "/>")
                    .attr({"for":  this.idOrName(element), generated: true})
                    .addClass(this.settings.errorClass)
                    .html(message || "");

IE为了显示标签而做了一些额外的琐事。

It does a bit of extra hackery to for IE to show the label

                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插入代码。

And right here we have the DOM insertion code.

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

这些都是从jQuery.validation源代码中粘贴的。如果别的东西不清楚，可以随意问。只需单独搜索文件并阅读源代码应该会有所帮助。我刚刚搜索错误

This has all been pasted from the jQuery.validation source. If something else is unclear feel free to ask. Just searching through the file alone and reading the source should help. I just searched for "error"

这篇关于jQuery验证代码如何工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！