jQuery验证代码如何工作

Question

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

Answer 1

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

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

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

它有一个内部调用的错误放置函数.它将遍历错误列表,然后调用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源粘贴的.如果其他不清楚的地方随意问.只搜索文件并阅读源代码应该会有所帮助.我只是搜索"错误"