jQuery Validation Engine是一款非常好用的表单验证工具，对常见的验证如：非空、长度、数字验证等，都有非常好的支持。详细可参考：/jquery/validation-engine/
下面在一个jsp页面举了一个简单的例子，如要使用jQuery Validation Engine插件，可参考下面的例子并结合官网介绍使用。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="/jsp/jstl/core"%><%@ taglib prefix="shiro" uri="/tags" %><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>新增用户</title><script src="js/jquery.js"></script><script src="js/jquery.validationEngine-zh_CN.js"></script><script src="js/jquery.validationEngine.js"></script><!-- jquery.validationEngine-zh_CN.js 为配置文件，可根据需求自行调整或增加，也可以更换为其他语言配置文件 --></head><script type="text/javascript">$(function(){//页面加载完成后就设置表单自动验证的规则//userForm为表单的id$("#userForm").validationEngine({autoHidePrompt:false,//自动隐藏showOnMouseOver:false,//当鼠标移出时触发//autoHideDelay:2,//自动隐藏延迟时间promptPosition:'bottomLeft',//提示信息的位置inlineValidation: true,//是否即时验证，false为提交表单时验证,默认true failure : function() {layer.message("验证失败，请检查");return false; },//验证失败时调用的函数ajaxFormValidation: true,//开始AJAX验证success : function() {//$("#addForm").submit();}//验证通过时调用的函数 //onAjaxFormComplete: ajaxValidationCallback});$("#submit").click(function(){//在表单提交时，先验证字段是否满足要求，如不满足要求，则$("userForm").validationEngine("validate")返回false//不能提交并在字段位置提示错误信息。if(!$("#userForm").validationEngine("validate")){return;}var options = {dataType:"json",data:{},success:function(json){layer.msg("提交成功");},error:function(json){layer.msg("系统错误,请联系管理员");}};$('#userForm').ajaxSubmit(options);})})//将select选中内容赋给对应的字段function setName(select){$("#"+select.id.replace("Id","Name")).val(select.selectedOptions[0].label);}//关闭function closeWindow(){parent.closeWin();}</script><body><form action="${_baseUrl}/userController/insertUser" id="userForm" name="userForm" method="post" enctype="multipart/form-data"><input type="hidden" name="token" value="${token}" /><table class="table table-bordered layout_table" style="margin-bottom: 20px"><tbody ><tr><td height="50" width="15%" align="center"><span style="color: #f00">*</span>用户名称</td><td width="35%" valign="middle" align="left" ><div><input type="text" class="validate[required,maxSize[100]] text_placeholder" name="userName" id="userName" value="" placeholder="请输入..."/></div></td><td height="50" width="15%" align="center"><span style="color: #f00">*</span>用户性别</td><td width="35%" valign="middle"><select class="validate[required]" name="sexId" id="sexId" onchange="setName(this)"><option value ="">请选择</option><option value ="1">男</option><option value ="0">女</option></select><input type="hidden" id="sexName" name="sexName" value="" /></td></tr><tr> <td height="50" width="15%" align="center"><span style="color: #f00">*</span>用户年龄</td><td width="35%" valign="middle"><input type="text" class="validate[custom[integer]] text_placeholder" name="age" id="age" value="" placeholder="请输入..."/></td> <td height="50" width="15%" align="center"><span style="color: #f00">*</span>用户功能</td><td width="35%" valign="middle" align="left"><input class='validate[required]' type='checkbox' name='softwareTestGrade' value='1'/>首页<input class='validate[required]' type='checkbox' name='softwareTestGrade' value='2'/>菜单<input class='validate[required]' type='checkbox' name='softwareTestGrade' value='3'/>后台</td></tr></tbody></table></form><div class="submit_group"><a href="javascript:;" class="submit" id="submit">提交</a><a href="javascript:;" class="cancel" onclick="closeWindow();">取消</a></div></body></html>
