当前位置: 代码迷 >> Web前端 >> jquery validate 印证自定义样式
  详细解决方案

jquery validate 印证自定义样式

热度:111   发布时间:2012-09-14 11:53:44.0
jquery validate 验证自定义样式

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

?

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

?

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

?

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

???????? 如果你调试的话会发现? 蛋疼的? this.submitted 里面根本就没有你要提交的字段, 但是如果你输入的话

onkeyup: function(element) {
			if ( element.name in this.submitted || element == this.lastElement || $(element).rules()) {
				this.element(element);
			}
		},

?????? 进行一次验证之后 this.element(element)? 他才会实例化到 this.submitted 这个数组里面去

?

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

?

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

?

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

?

?

onkeyup:false

// or

onkeyup:function(){alert('keyup')}

?

??? 不过还是别乱覆盖

?

? 3 自定义样式

?

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

?

??? 还好有一个 errorPlacement 和 success

?

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

?

??? success:验证成功进行的处理

?

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

?

  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, 做了点修改

?

?

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()[i], this.settings.errorClass, 
                                                                      this.settings.validClass );
		}

},
?

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

?

?

?

?

1 楼 a_alter 2011-08-15  
hideErrors: 修改

if(this.settings.success){
    if(typeof this.settings.success == "string"){
this.addWrapper(this.toHide).hide();
}else{
this.settings.success(this.toHide);
}
}else{
this.addWrapper(this.toHide).hide();
}

不然会影响以前的功能
  相关解决方案