javascript – jQuery验证代码的工作原理

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

@H_502_5@解决方法

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

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源粘贴的.如果有其他不清楚的地方,请随意询问.只是单独搜索文件并阅读源代码应该会有所帮助.我只是搜索“错误”

javascript – jQuery验证代码的工作原理

猜你在找的jQuery相关文章