jQuery Validation Engine是一款非常好用的表單驗證工具，對常見的驗證如：非空、長度、數字驗證等，都有非常好的支持。詳細可參考：http://code.ciaoca.com/jquery/validation-engine/
下面在一個jsp頁面舉了一個簡單的例子，如要使用jQuery Validation Engine插件，可參考下面的例子並結合官網介紹使用。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/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>