jquery validate 验证自定义样式

       最近在找一些表单验证框架， 也看了很多 。 由于以前使用过jquery validate 进行一些简单的例子，于是从内心上开始的时候就偏向了他，不过这次想系统的了解用下还是有点波折的。在使用中的时候我发现 jquery validate 的作者的表单验证的思路和我平时的还真的不一样。

     下面就记录一些使用中的问题吧。具体使用方法也不多介绍

     1.  :text  框不输入就离开不验证的问题

Js代码  
onfocusout: function(element) {   
            if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {   
                this.element(element);   
            }   
        },  

onfocusout: function(element) {
                        if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
                                this.element(element);
                        }
                },         如果你调试的话会发现  蛋疼的  this.submitted 里面根本就没有你要提交的字段， 但是如果你输入的话
Js代码  
onkeyup: function(element) {   
            if ( element.name in this.submitted || element == this.lastElement || $(element).rules()) {   
                this.element(element);   
            }   
        },  

onkeyup: function(element) {
                        if ( element.name in this.submitted || element == this.lastElement || $(element).rules()) {
                                this.element(element);
                        }
                },       进行一次验证之后 this.element(element)  他才会实例化到 this.submitted 这个数组里面去

   所以我针对这个问题做如下修改

Java代码  
onfocusout: function(element) {   
            if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)   
                         <SPAN style="COLOR: #ff0000"> || $(element).rules()</SPAN>   
) ) {   
                this.element(element);   
            }   
        },  

onfocusout: function(element) {
                        if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)
                          || $(element).rules()
) ) {
                                this.element(element);
                        }
                },
   2. jquery validate 监听的事件

   我在查资料的时候 说啥默认值是 True， 结果我在测试的时候  无意间把值该为了True, 结果就葛了

   其实应该这样介绍  系统对这样写时间默认是开启的， 如果需要关闭 可以把对应的属性设置为 false

   如果要覆盖的话， 把值设置为你要运行的方法 如下


Java代码  
onkeyup:false  
  
// or   
  
onkeyup:function(){alert('keyup')}  

onkeyup:false

// or

onkeyup:function(){alert('keyup')}
    不过还是别乱覆盖

  3 自定义样式

    jquery validate 自定义错误位置样式， 但是就提供了一个 wrapper 这样的样式功能还是捉襟见肘

    还好有一个 errorPlacement 和 success

    errorPlacemen: 用来指定错误的处理方式

    success:验证成功进行的处理

    在 validate 中 success 的 function 的处理有一点小问题， 在hideErrors 中 就没有针对 function success 进行处理，只处理了 设置成功 css 的 success 设置，做了一点小修改

Java代码  
hideErrors: function() {   
    <SPAN style="COLOR: #ff0000">if(typeof this.settings.success == "string"){</SPAN>   
  
        this.addWrapper(this.toHide).hide();   
    <SPAN style="COLOR: #ff0000">}else{   
        this.settings.success(this.toHide);   
    }</SPAN>   
  
},  

  hideErrors: function() {
                if(typeof this.settings.success == "string"){

                        this.addWrapper(this.toHide).hide();
                }else{
                        this.settings.success(this.toHide);
                }

},
   我也写了一个小例子， 放在附件中 FF 看，IE不行 没去写啥兼容的css

   

  4  高亮显示

   高亮显示主要是通过

  highlight 和 unhighlight 来进行完成的， 针对于验证对象的一些css 操作 ， 但是在 resetForm 中，根本没有对高亮显示的对象进行reset, 做了点修改


Java代码  
resetForm: function() {   
        if ($.fn.resetForm)   
            $( this.currentForm ).resetForm();   
        this.submitted = {};   
        this.prepareForm();   
        this.hideErrors();   
        this.elements().removeClass( this.settings.errorClass );<SPAN style="COLOR: #ff0000">   
        for(var i=0; i< this.elements().length; i++){   
            this.settings.unhighlight.call( this, this.elements(), this.settings.errorClass,   
                                                                      this.settings.validClass );   
        }</SPAN>   
  
},  

resetForm: function() {
                if ($.fn.resetForm)
                        $( this.currentForm ).resetForm();
                this.submitted = {};
                this.prepareForm();
                this.hideErrors();
                this.elements().removeClass( this.settings.errorClass );
                for(var i=0; i< this.elements().length; i++){
                        this.settings.unhighlight.call( this, this.elements(), this.settings.errorClass,
                                                                      this.settings.validClass );
                }

},  
  我源码也没全看 也只是片段性的看了下，如有错误还请指出





大小: 13.3 KB
styleDemo.rar (46 KB)
下载次数: 25
查看图片附件

推荐链接
20-30万急聘多名天才Java/MTA软件工程师

3G培训就业月薪平均7K+，不3K就业不花一分钱！
见证又一个准百万富翁的诞生！