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;这个样式是我加的，其默认的提示文本是放在验证元素下一行，加了这一行后就变成一行了
图片资源:
当然html中则不应该再添加提示元素了
<span class="help-inline">Something may have gone wrong</span>
实际效果截图:
横排效果
使用中发现的问题：
resetForm方法没有重置对应控件的成功/错误状态,虽然移除了提示文本，但是success或error样式任然保留。
url验证对texarea没有trim值，导致有空格的话就验证为错误。
参见:
