主要用到了以下几个文件
1 js文件 jquery.validationEngine.js | jquery.validationEngine-cn.js | jquery.js
2 css文件 validationEngine.jquery.css
3 在需要验证的页面引入以上文件
- <%@?page?language= "java" ? import = "java.util.*,vutc.com.view.ws.ConfigUtil" ?pageEncoding= "UTF-8" %>??
- <%@taglib ?uri= "/struts-tags" ?prefix= "s" %>??
- ??
- <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN" >??
- <html>??
- ??<head>??
- ??<META???HTTP-EQUIV="pragma" ???CONTENT= "no-cache" >???????????
- ?<META???HTTP-EQUIV="Cache-Control" ???CONTENT= "no-cache,???must-revalidate" >???????????
- <META???HTTP-EQUIV="expires" ???CONTENT= "0" >???
- ??<link?href="css/link.css" ?rel= "stylesheet" ?type= "text/css" ?/>??
- ??
- ??<script?type="text/javascript" ?src= "js/public.js" >?</script>??
- <link?rel="stylesheet" ?href= "css/validationEngine.jquery.css" ?type= "text/css" ?media= "screen" ?title= "no?title" ?charset= "utf-8" ?/>??
- ????????<link?rel="stylesheet" ?href= "css/template.css" ?type= "text/css" ?media= "screen" ?title= "no?title" ?charset= "utf-8" ?/>??
- ????????<script?src="js/jquery-1.4.min.js" ?type= "text/javascript" ></script>??
- ????????<script?src="js/jquery.validationEngine-cn.js" ?type= "text/javascript" ></script>??
- ????????<script?src="js/jquery.validationEngine.js" ?type= "text/javascript" ></script>??
- ?<%?????
- response.setHeader("Pragma" , "No-cache" );??????
- response.setHeader("Cache-Control" , "no-cache" );??????
- response.setDateHeader("Expires" ,?- 10 );?????
- %>???
- ????????<script>????
- ????????$(document).ready(function()?{??
- ????????????//?SUCCESS?AJAX?CALL,?replace?"success:?false,"?by:?????success?:?function()?{?callSuccessFunction()?},? ??
- ??????????????
- ????????????$("#formID" ).validationEngine({??
- ????????????????showOnMouseOver:true ,??
- ?????????????validationEventTriggers:"blur" ,?? //触发的事件??validationEventTriggers:"keyup?blur",?? ??
- ?????????????inlineValidation:?true , //是否即时验证,false为提交表单时验证,默认true?? ??
- ?????????????success?:??false , //为true?时即使有不符合的也提交表单,false表示只有全部通过验证了才能提交表单,默认false?? ??
- ?????????????promptPosition:?"topRight" , //提示所在的位置,topLeft,?topRight,?bottomLeft,??centerRight,?bottomRight?? ??
- ?????????????//failure?:?function()?{?alert("验证失败,请检查。");??}//验证失败时调用的函数?? ??
- ?????????????//success?:?function()?{?callSuccessFunction()?},//验证通过时调用的函数? ??
- ????????????})??
- ??????????
- ????????});??
- ??????????
- ??????????
- ??????
- ????</script>??
- <script?language="javascript" >??
- ??
- ??
- ??
- function?saveV(){??
- ??
- if ($( '#formID' ).validationEngine({returnIsValid: true })== true ){??
- $.ajax({??
- ???type:?"POST" ,??
- ???url:?"syncTask!addSyncTask.action" ,??
- ???data:$("#form1" ).serialize(),??
- ???success:?function(msg){??
- ???????
- ??????if (msg== 0 ){??
- ????????alert("添加成功" );??
- ????????window.location.reload();??
- ?????}else {??
- ????????alert("添加失败" );??
- ?????}??
- ???????
- ???}??
- });???
- }else {??
- return ? false ;??
- }??
- ??
- }??
- </script>??
- ??
- ??
- ??</head>??
- ??<body?style="margin-top:0px;" ?onLoad= "settitle();" >??
- ?<form?id="formID" ? class = "formular" ?method= "post" ?action= "" >??
- ??<input?type="hidden" ?name= "loginName" ?value= "${user.info.userName}" />??
- ???<table?width="100%" ?height= "768" ?border= "0" ?background= "<%=request.getContextPath()?%>/image/01.jpg" ><tr><td>??
- ??<table?width="1024" ?height= "100%" ?border= "0" ?align= "center" ?cellspacing= "0" ??background= "<%=request.getContextPath()?%>/image/UI02.jpg" >??
- ?<tr>??
- ????<td?width="162" ?rowspan= "5" > </td>??
- ????<td?height="139" > </td>??
- ????<td?width="61" ?rowspan= "5" > <jsp:include?flush= "false" ?page= "rxtitle.jsp" /></td>??
- ??</tr>??
- ??<tr>??
- ????<td?width="787" ?height= "63" >??
- ??????
- ????<jsp:include?flush="false" ?page= "title.jsp" />???
- ????</td>??
- ??</tr>????
- ??<tr>??
- ????<td?height="30" ?align= "center" ?valign= "top" ?style= "font-size:12px" ><label?id= "isError" ?style=color:red>${fileIsReboot?}</label>??
- ????<div?id="saveValue" ?style=color:red></div>??
- ????</td>??
- ??</tr>??
- ??<tr>??
- ????<td?height="" >??
- ??<!--?-----------------?-->??
- ?<table?height="100%" ?width= "100%" ?border= "0" ><tr><td>??
- ??<table?height="100%" ?width= "500" ?border= "1" ?align= "center" ?bordercolor= "#000000" ?cellspacing= "0" ?style= "border-top:none;border-left:none;?border-right:none;border-bottom:none" >??
- <!--?第一行?-->??
- ??<tr><td?height="135" ?style= "border-top:none;border-left:none;?border-right:none;border-bottom:none" >??
- ?<div?align="center" ><strong>数据库同步配置信息</strong></div>??
- ??<table?width="100%" ?height= "135" ?border= "1" ?align= "center" ?bordercolor= "#000000" ?cellspacing= "0" ??style= "border-top:none;border-left:none;?border-right:none;border-bottom:none" >??
- ????????<tr?style=font-size:12px>??
- ??????????<td?colspan="3" ?height= "10" ></td>??
- ????????</tr>??
- ??<tr>??
- ????<td?colspan="2" ?height= "1" > </td>??
- ??????
- ??????
- ??</tr>??
- ????????<tr?style=font-size:12px?height="10" >??
- ??????????<td?width="29%" ?style= "border-top:none;border-right:none;" ><span?style= "border-top:none;?border-right:none;?" >任务标识</span></td>??
- ??????????<td?width="71%" ?style= "border-top:none;" ><span?style= "border-top:none;??border-right:none;" >??
- ???????????[b]<input?value="" ? class = "validate[required,custom[noSpecialCaracters],length[0,20],ajax[ajaxUser]]" ?type= "text" ?name= "taskName" ?id= "taskName" ?/>[/b]??
- ??????????</span>??
- ??????????<div?id="aa" ></div>??
- ??????????</td>??
- ????????</tr>??
- ?????<tr?style=font-size:12px?height="10" >??
- ??????????<td?width="29%" ?style= "border-top:none;border-right:none;" ><span?style= "border-top:none;?border-right:none;?" >是否备份</span></td>??
- ??????????<td?width="71%" ?style= "border-top:none;" ><span?style= "border-top:none;??border-right:none;" >??
- ????????????<input?type="radio" ?name= "isBackup" ?value= "0" ?checked= "checked" >不备份??
- ????????????<input?type="radio" ?name= "isBackup" ?value= "1" >备份??
- ??????????</span>??
- ??????????</td>??
- ????????</tr>??
- ??
- ?????????<tr?style=font-size:12px?height="10" >??
- ??????????<td?width="29%" ?style= "border-top:none;border-right:none;" >数据库类型</td>??
- ??????????<td?width="71%" ?style= "border-top:none;" ><span?style= "border-top:none;?border-right:none;" >??
- ????????????<select?name="dbType" ?id= "dbType" >??
- ????????????????
- ??????????????<option?value="1" >MySql</option>??
- ??????????????<option?value="2" >SqlServer</option>??
- ??????????????<option?value="3" >Oracle</option>??
- ??????????????<option?value="4" >DB2</option>??
- ????????????</select>??
- ??????????</span></td>??
- ????????</tr>??
- ?????????<tr?style=font-size:12px?height="10" >??
- ??????????<td?width="29%" ?style= "border-top:none;border-right:none;" ><span?style= "border-top:none;?border-right:none;" >数据库名称</span></td>??
- ??????????<td?width="71%" ?style= "border-top:none;" ><input?type= "text" ?id= "dbName" ?name= "dbName" ? class = "validate[required,custom[noSpecialCaracters],length[0,20]]" ??value= "" ?size= "20" ></td>??
- ????????</tr>??
- ?????????<tr?style=font-size:12px?height="10" >??
- ??????????<td?width="29%" ?style= "border-top:none;border-right:none;" ><span?style= "border-top:none;?border-right:none;" >数据库ip地址</span></td>??
- ??????????<td?width="71%" ?style= "border-top:none;" ><input?type= "text" ?id= "dbAddress" ?name= "dbAddress" ? class = "validate[required,custom[ip],length[0,20]]" ??value= "" ?size= "20" ></td>??
- ????????</tr>??
- ?????????<tr?style=font-size:12px?height="10" >??
- ??????????<td?width="29%" ?style= "border-top:none;border-right:none;" >用户名</td>??
- ??????????<td?width="71%" ?style= "border-top:none;" ><span?style= "border-top:none;?border-right:none;" >??
- ????????????<input?type="text" ?id= "dbUser" ?name= "dbUser" ? class = "validate[required,custom[noSpecialCaracters],length[0,20]]" ?value= "" ?size= "20" >??
- ??????????</span></td>??
- ????????</tr>??
- ?????????<tr?style=font-size:12px?height="10" >??
- ??????????<td?width="29%" ?style= "border-top:none;border-right:none;" >数据库密码</td>??
- ??????????<td?width="71%" ?style= "border-top:none;" ><span?style= "border-top:none;?border-right:none;" >??
- ????????????<input?type="text" ?id= "dbPassword" ?name= "dbPassword" ? class = "validate[required,custom[noSpecialCaracters],length[0,20]]" ?value= "" ?size= "20" >??
- ??????????</span></td>??
- ????????</tr>??
- ??????????
- ????????<tr?style=font-size:12px?height="10" >??
- ????????<td?colspan="3" ?align= "center" ?style= "?border-left:none;?border-right:none;border-bottom:none" >??
- ????????<input?type="button" ???value= "添?加" ?onclick= "saveV()" />?</td></tr>??
- ??</table>??
- ??</td></tr>??
- ????
- ??</table>??
- ????
- ??</td></tr></table>??
- ?<!--?--------------------?-->??
- ????</td>??
- ??</tr>??
- ??<tr>??
- ????<td?height="91" > </td>??
- ??</tr>??
- </table>??
- </td></tr></table>??
- </form>??
- ??
- ??</body>??
- </html>??
注意 上面有部分粗体标示的地方 是用来验证用户名是否重复的(这里折腾了好久才出来)
在 jquery.validationEngine-cn.js中有这样一段
- "ajaxUser" :{??
- ????????????????????????"file" : "[i]syncTask!val.action[/i]" ,??
- ????????????????????????"alertTextOk" : "*?帐号可以使用." ,????
- ????????????????????????"alertTextLoad" : "*?检查中,?请稍后..." ,??
- ????????????????????????"alertText" : "*?帐号不能使用." },?????
上面斜体部分是你的action 或servlet 都可以
下面是比较重要的你后台返回的东西了
- public ? void ?val(){??
- ????????this .getResponse().setContentType(? "text/html;charset=utf-8" ?);???
- ????????try ?{??
- ????????????PrintWriter?out=this .getResponse().getWriter();??
- ?????????????ActionContext?ac?=?ActionContext.getContext();??
- ??
- ?????????????HttpServletRequest?request?=?(HttpServletRequest)?ac.get(ServletActionContext.HTTP_REQUEST);??
- ??
- ?????????????String?validateId?=?request.getParameter("validateId" );? //获取插件post参数validateId ??
- ??
- ??
- ?????????????String?validateValue?=?request.getParameter("validateValue" );? //获取插件post参数validateValue ??
- ??
- ?????????????String?validateError?=?request.getParameter("validateError" );? //获取插件post参数validateError? ??
- ??
- ??
- ??
- ??
- ????????boolean ?flags?=? this .iFacadeSyncTask.valdateTaskName(validateValue);??
- ????????String?message?=?"" ;??
- ??????????
- ????????if (flags){??
- ??????????????
- ????????????[b]out.println("{'jsonValidateReturn':['" +validateId+ "','" +validateError+ "','false']}" );[/b]??
- ????????}else {??
- ????????????[b]out.println("{'jsonValidateReturn':['" +validateId+ "','" +validateError+ "','true']}" );[/b]??
- ????????}??
- ????????}catch (Exception?e){??
- ????????????e.printStackTrace();??
- ????????}??
- ??????????
- ????}??
上面加粗的地方就是前台页面需要的东东