jquery validate 插件

jquery validate plugin是个很不错的验证form的插件,提供许多类型的验证并且UI错误提示。

 

主页:

http://docs.jquery.com/Plugins/Validation

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

 

配置一个form下面的验证:

$('#frm').validate({
			rules : {
				username : {
					minlength : 2,
					required : true
				},
				email : {
					required : true,
					email : true
				}
			},
			messages : {
				username : {
//					minlength : jQuery
//							.format("At least {0} characters required!")
					minlength : 'Why your name is so short?'		
				},
				email : {
					required : "We need your email address to send token to you"
				}
			}			
		});

 

据我使用的情况,选择子必须是个form,否则报错。

上面的例子为name=”username”这个元素指定了最小长度2,必须这两个验证

为name=”email”这个元素指定了必须和email这两个验证。

对应的messages则制定了出错后的显示字符串(如果要支持i18n则需要另外的使用方法。)

 

结合bootstrap使用的例子http://alittlecode.com/jquery-form-validation-with-styles-from-twitter-bootstrap/

代码中只需要添加如下:

 

highlight : function(element) {
				$(element).closest('.control-group').removeClass('success')
						.addClass('error');
			},
			success : function(element) {
				element.text('OK!').addClass('valid').closest('.control-group')
						.removeClass('error').addClass('success');
			}

 

需添加样式:

label.valid {
	width: 24px;
	height: 24px;
	background: url(../i/valid.png) center center no-repeat;
	display: inline-block;
	text-indent: -9999px;
}

label.error {
	font-weight: bold;
	color: red;
	padding: 2px 8px;
	margin-top: 2px;
	/** here to make the text in the same line of control*/
	display: inline-block;
}

注意display: inline-block;这个样式是我加的,其默认的提示文本是放在验证元素下一行,加了这一行后就变成一行了

 

图片资源:

error valid

 

 

当然html中则不应该再添加提示元素了

<span class="help-inline">Something may have gone wrong</span>

 

实际效果截图:

 

横排效果

Snap1

 

 

使用中发现的问题:

resetForm方法没有重置对应控件的成功/错误状态,虽然移除了提示文本,但是success或error样式任然保留。

url验证对texarea没有trim值,导致有空格的话就验证为错误。

 

 

参见:

http://zhudp-cn.iteye.com/blog/255168


Total views.

© 2013 - 2018. All rights reserved.

Powered by Hydejack v6.6.1