Skip to content

JQuery Validation Plugin

Jump to bottom
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