Skip to content

JQuery Validation Plugin

Calvin Xiao edited this page Nov 15, 2013 · 1 revision

Official Site : http://jqueryvalidation.org/

Document: http://validation.bassistance.de/documentation/

showcase中的userForm.jsp是最完整的演示。

##良好的客户体验 为什么说客户端验证的体验更好,除了不用真正提交form外就知道错误,它还能:

  • 对于remote的验证,是会在input框失去焦点之后立刻就去做,而其他验证则只在第一次submit之后才会去做。
  • 但一旦发现错误,就会在用户再输入后积极的重新校验,及时消去错误提示信息。
  • 如果出错,光标会智能的focous在出错的input框上.

##基本用法

在input框中的加上标签即可。

<script>
	$(document).ready(function() {
		$("#loginForm").validate();
	});
</script>
<form id="loginForm">
    <input type="text"  name="username" class="required"/>
    <input type="password" name="password" class="required" minlength="3"/>
    <input type="password" name="passwordConfirm" equalTo="#password"/>
</form>

##高级配置 在validate()函数中写Options:

<script>
	$(document).ready(function() {
		$("#inputForm").validate({
			rules: {
				loginName: {
					remote: "${ctx}/account/user/checkLoginName"
				},
				groupList:"required"
			},
			messages: {
				loginName: {
					remote: "User Name Exists"
				},
				passwordConfirm: {
					equalTo: "Input the same password as above"
				}
			},
			errorContainer: "#messageBox",
			errorPlacement: function(error, element) {
				if ( element.is(":checkbox") )
					error.appendTo ( element.parent().next() );
				else
					error.insertAfter( element );
				}
			});
		});
</script>
  • rules: 不方便写在input框里的规则,比如remote规则,会发出Ajax请求校验用户名是否已存在。返回结果如果是"false"文本就是失败。

  • messages: 在默认的出错信息外,定义自己的自定义出错信息。

  • errorContainer: 定义一个总的出错提示信息box,你可以在页面里预先定义一个"输入值有误,请先更正"之类的提示框,先把它hide起来,到了真正有错误发生时,就会显示出来。错误被改正后又会自动隐藏掉。

  • errorPlacement: 默认会在出错的元素后面append一个出错信息框,但像checkbox这种情况,则需要放到一个更高的地方。

##CSS控制 出错时,默认会把input框的class设为error,然后插入一个class为error的,可根据需要进行样式控制。比如springside中就添加了一个红色交叉的图片。

与Twitter bootstrap集成时, errror的会被挤到下一行去,解决方法是换成error element换成元素。

$(document).ready(function() {
		$("#loginForm").validate({
			errorElement: "span"
		});
	});
为了不需要每次都声明一次errorElement, 可以找个地方统一扩展。SpringSide修改了原来的messages_cn.js,添加了下面这句

```js
jQuery.extend(jQuery.validator.defaults, {
    errorElement: "span"
}); 

另外,Bootstrap自带error/warning样式的感觉并不漂亮,因此没有使用,如果要使用的话,可以使用如下语句:

$('#contact-form').validate({
	    highlight: function(label) {
	    	$(label).closest('.control-group').addClass('error');
	    },
	    unhighlight: function(label) {
	    	$(label).closest('.control-group').removeClass('error');
	    }
	  });
Clone this wiki locally