当前位置： 代码迷 >> Web前端 >> 关于jquery的印证框架jquery.validationEngine
  详细解决方案

关于jquery的印证框架jquery.validationEngine

热度：446   发布时间：2012-09-01 09:33:02.0
关于jquery的验证框架jquery.validationEngine

主要用到了以下几个文件
1 js文件 jquery.validationEngine.js | jquery.validationEngine-cn.js | jquery.js
2 css文件 validationEngine.jquery.css
3 在需要验证的页面引入以上文件

Java代码 ?收藏代码
  1. <%@?page?language= "java" ? import = "java.util.*,vutc.com.view.ws.ConfigUtil" ?pageEncoding= "UTF-8" %>??
  2. <%@taglib ?uri= "/struts-tags" ?prefix= "s" %>??
  3. ??
  4. <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN" >??
  5. <html>??
  6. ??<head>??
  7. ??<META???HTTP-EQUIV="pragma" ???CONTENT= "no-cache" >???????????
  8. ?<META???HTTP-EQUIV="Cache-Control" ???CONTENT= "no-cache,???must-revalidate" >???????????
  9. <META???HTTP-EQUIV="expires" ???CONTENT= "0" >???
  10. ??<link?href="css/link.css" ?rel= "stylesheet" ?type= "text/css" ?/>??
  11. ??
  12. ??<script?type="text/javascript" ?src= "js/public.js" >?</script>??
  13. <link?rel="stylesheet" ?href= "css/validationEngine.jquery.css" ?type= "text/css" ?media= "screen" ?title= "no?title" ?charset= "utf-8" ?/>??
  14. ????????<link?rel="stylesheet" ?href= "css/template.css" ?type= "text/css" ?media= "screen" ?title= "no?title" ?charset= "utf-8" ?/>??
  15. ????????<script?src="js/jquery-1.4.min.js" ?type= "text/javascript" ></script>??
  16. ????????<script?src="js/jquery.validationEngine-cn.js" ?type= "text/javascript" ></script>??
  17. ????????<script?src="js/jquery.validationEngine.js" ?type= "text/javascript" ></script>??
  18. ?<%?????
  19. response.setHeader("Pragma" , "No-cache" );??????
  20. response.setHeader("Cache-Control" , "no-cache" );??????
  21. response.setDateHeader("Expires" ,?- 10 );?????
  22. %>???
  23. ????????<script>????
  24. ????????$(document).ready(function()?{??
  25. ????????????//?SUCCESS?AJAX?CALL,?replace?"success:?false,"?by:?????success?:?function()?{?callSuccessFunction()?},? ??
  26. ??????????????
  27. ????????????$("#formID" ).validationEngine({??
  28. ????????????????showOnMouseOver:true ,??
  29. ?????????????validationEventTriggers:"blur" ,?? //触发的事件??validationEventTriggers:"keyup?blur",?? ??
  30. ?????????????inlineValidation:?true , //是否即时验证，false为提交表单时验证,默认true?? ??
  31. ?????????????success?:??false , //为true?时即使有不符合的也提交表单,false表示只有全部通过验证了才能提交表单,默认false?? ??
  32. ?????????????promptPosition:?"topRight" , //提示所在的位置，topLeft,?topRight,?bottomLeft,??centerRight,?bottomRight?? ??
  33. ?????????????//failure?:?function()?{?alert("验证失败，请检查。");??}//验证失败时调用的函数?? ??
  34. ?????????????//success?:?function()?{?callSuccessFunction()?},//验证通过时调用的函数? ??
  35. ????????????})??
  36. ??????????
  37. ????????});??
  38. ??????????
  39. ??????????
  40. ??????
  41. ????</script>??
  42. <script?language="javascript" >??
  43. ??
  44. ??
  45. ??
  46. function?saveV(){??
  47. ??
  48. if ($( '#formID' ).validationEngine({returnIsValid: true })== true ){??
  49. $.ajax({??
  50. ???type:?"POST" ,??
  51. ???url:?"syncTask!addSyncTask.action" ,??
  52. ???data:$("#form1" ).serialize(),??
  53. ???success:?function(msg){??
  54. ???????
  55. ??????if (msg== 0 ){??
  56. ????????alert("添加成功" );??
  57. ????????window.location.reload();??
  58. ?????}else {??
  59. ????????alert("添加失败" );??
  60. ?????}??
  61. ???????
  62. ???}??
  63. });???
  64. }else {??
  65. return ? false ;??
  66. }??
  67. ??
  68. }??
  69. </script>??
  70. ??
  71. ??
  72. ??</head>??
  73. ??<body?style="margin-top:0px;" ?onLoad= "settitle();" >??
  74. ?<form?id="formID" ? class = "formular" ?method= "post" ?action= "" >??
  75. ??<input?type="hidden" ?name= "loginName" ?value= "${user.info.userName}" />??
  76. ???<table?width="100%" ?height= "768" ?border= "0" ?background= "<%=request.getContextPath()?%>/image/01.jpg" ><tr><td>??
  77. ??<table?width="1024" ?height= "100%" ?border= "0" ?align= "center" ?cellspacing= "0" ??background= "<%=request.getContextPath()?%>/image/UI02.jpg" >??
  78. ?<tr>??
  79. ????<td?width="162" ?rowspan= "5" >&nbsp;</td>??
  80. ????<td?height="139" >&nbsp;</td>??
  81. ????<td?width="61" ?rowspan= "5" >&nbsp;<jsp:include?flush= "false" ?page= "rxtitle.jsp" /></td>??
  82. ??</tr>??
  83. ??<tr>??
  84. ????<td?width="787" ?height= "63" >??
  85. ??????
  86. ????<jsp:include?flush="false" ?page= "title.jsp" />???
  87. ????</td>??
  88. ??</tr>????
  89. ??<tr>??
  90. ????<td?height="30" ?align= "center" ?valign= "top" ?style= "font-size:12px" ><label?id= "isError" ?style=color:red>${fileIsReboot?}</label>??
  91. ????<div?id="saveValue" ?style=color:red></div>??
  92. ????</td>??
  93. ??</tr>??
  94. ??<tr>??
  95. ????<td?height="" >??
  96. ??<!--?-----------------?-->??
  97. ?<table?height="100%" ?width= "100%" ?border= "0" ><tr><td>??
  98. ??<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" >??
  99. <!--?第一行?-->??
  100. ??<tr><td?height="135" ?style= "border-top:none;border-left:none;?border-right:none;border-bottom:none" >??
  101. ?<div?align="center" ><strong>数据库同步配置信息</strong></div>??
  102. ??<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" >??
  103. ????????<tr?style=font-size:12px>??
  104. ??????????<td?colspan="3" ?height= "10" ></td>??
  105. ????????</tr>??
  106. ??<tr>??
  107. ????<td?colspan="2" ?height= "1" >&nbsp;</td>??
  108. ??????
  109. ??????
  110. ??</tr>??
  111. ????????<tr?style=font-size:12px?height="10" >??
  112. ??????????<td?width="29%" ?style= "border-top:none;border-right:none;" ><span?style= "border-top:none;?border-right:none;?" >任务标识</span></td>??
  113. ??????????<td?width="71%" ?style= "border-top:none;" ><span?style= "border-top:none;??border-right:none;" >??
  114. ???????????[b]<input?value="" ? class = "validate[required,custom[noSpecialCaracters],length[0,20],ajax[ajaxUser]]" ?type= "text" ?name= "taskName" ?id= "taskName" ?/>[/b]??
  115. ??????????</span>??
  116. ??????????<div?id="aa" ></div>??
  117. ??????????</td>??
  118. ????????</tr>??
  119. ?????<tr?style=font-size:12px?height="10" >??
  120. ??????????<td?width="29%" ?style= "border-top:none;border-right:none;" ><span?style= "border-top:none;?border-right:none;?" >是否备份</span></td>??
  121. ??????????<td?width="71%" ?style= "border-top:none;" ><span?style= "border-top:none;??border-right:none;" >??
  122. ????????????<input?type="radio" ?name= "isBackup" ?value= "0" ?checked= "checked" >不备份??
  123. ????????????<input?type="radio" ?name= "isBackup" ?value= "1" >备份??
  124. ??????????</span>??
  125. ??????????</td>??
  126. ????????</tr>??
  127. ??
  128. ?????????<tr?style=font-size:12px?height="10" >??
  129. ??????????<td?width="29%" ?style= "border-top:none;border-right:none;" >数据库类型</td>??
  130. ??????????<td?width="71%" ?style= "border-top:none;" ><span?style= "border-top:none;?border-right:none;" >??
  131. ????????????<select?name="dbType" ?id= "dbType" >??
  132. ????????????????
  133. ??????????????<option?value="1" >MySql</option>??
  134. ??????????????<option?value="2" >SqlServer</option>??
  135. ??????????????<option?value="3" >Oracle</option>??
  136. ??????????????<option?value="4" >DB2</option>??
  137. ????????????</select>??
  138. ??????????</span></td>??
  139. ????????</tr>??
  140. ?????????<tr?style=font-size:12px?height="10" >??
  141. ??????????<td?width="29%" ?style= "border-top:none;border-right:none;" ><span?style= "border-top:none;?border-right:none;" >数据库名称</span></td>??
  142. ??????????<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>??
  143. ????????</tr>??
  144. ?????????<tr?style=font-size:12px?height="10" >??
  145. ??????????<td?width="29%" ?style= "border-top:none;border-right:none;" ><span?style= "border-top:none;?border-right:none;" >数据库ip地址</span></td>??
  146. ??????????<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>??
  147. ????????</tr>??
  148. ?????????<tr?style=font-size:12px?height="10" >??
  149. ??????????<td?width="29%" ?style= "border-top:none;border-right:none;" >用户名</td>??
  150. ??????????<td?width="71%" ?style= "border-top:none;" ><span?style= "border-top:none;?border-right:none;" >??
  151. ????????????<input?type="text" ?id= "dbUser" ?name= "dbUser" ? class = "validate[required,custom[noSpecialCaracters],length[0,20]]" ?value= "" ?size= "20" >??
  152. ??????????</span></td>??
  153. ????????</tr>??
  154. ?????????<tr?style=font-size:12px?height="10" >??
  155. ??????????<td?width="29%" ?style= "border-top:none;border-right:none;" >数据库密码</td>??
  156. ??????????<td?width="71%" ?style= "border-top:none;" ><span?style= "border-top:none;?border-right:none;" >??
  157. ????????????<input?type="text" ?id= "dbPassword" ?name= "dbPassword" ? class = "validate[required,custom[noSpecialCaracters],length[0,20]]" ?value= "" ?size= "20" >??
  158. ??????????</span></td>??
  159. ????????</tr>??
  160. ??????????
  161. ????????<tr?style=font-size:12px?height="10" >??
  162. ????????<td?colspan="3" ?align= "center" ?style= "?border-left:none;?border-right:none;border-bottom:none" >??
  163. ????????<input?type="button" ???value= "添?加" ?onclick= "saveV()" />?</td></tr>??
  164. ??</table>??
  165. ??</td></tr>??
  166. ????
  167. ??</table>??
  168. ????
  169. ??</td></tr></table>??
  170. ?<!--?--------------------?-->??
  171. ????</td>??
  172. ??</tr>??
  173. ??<tr>??
  174. ????<td?height="91" >&nbsp;</td>??
  175. ??</tr>??
  176. </table>??
  177. </td></tr></table>??
  178. </form>??
  179. ??
  180. ??</body>??
  181. </html>??


注意 上面有部分粗体标示的地方 是用来验证用户名是否重复的（这里折腾了好久才出来）
在 jquery.validationEngine-cn.js中有这样一段

Java代码 ?收藏代码
  1. "ajaxUser" :{??
  2. ????????????????????????"file" : "[i]syncTask!val.action[/i]" ,??
  3. ????????????????????????"alertTextOk" : "*?帐号可以使用." ,????
  4. ????????????????????????"alertTextLoad" : "*?检查中,?请稍后..." ,??
  5. ????????????????????????"alertText" : "*?帐号不能使用." },?????


上面斜体部分是你的action 或servlet 都可以
下面是比较重要的你后台返回的东西了

Java代码 ?收藏代码
  1. public ? void ?val(){??
  2. ????????this .getResponse().setContentType(? "text/html;charset=utf-8" ?);???
  3. ????????try ?{??
  4. ????????????PrintWriter?out=this .getResponse().getWriter();??
  5. ?????????????ActionContext?ac?=?ActionContext.getContext();??
  6. ??
  7. ?????????????HttpServletRequest?request?=?(HttpServletRequest)?ac.get(ServletActionContext.HTTP_REQUEST);??
  8. ??
  9. ?????????????String?validateId?=?request.getParameter("validateId" );? //获取插件post参数validateId ??
  10. ??
  11. ??
  12. ?????????????String?validateValue?=?request.getParameter("validateValue" );? //获取插件post参数validateValue ??
  13. ??
  14. ?????????????String?validateError?=?request.getParameter("validateError" );? //获取插件post参数validateError? ??
  15. ??
  16. ??
  17. ??
  18. ??
  19. ????????boolean ?flags?=? this .iFacadeSyncTask.valdateTaskName(validateValue);??
  20. ????????String?message?=?"" ;??
  21. ??????????
  22. ????????if (flags){??
  23. ??????????????
  24. ????????????[b]out.println("{'jsonValidateReturn':['" +validateId+ "','" +validateError+ "','false']}" );[/b]??
  25. ????????}else {??
  26. ????????????[b]out.println("{'jsonValidateReturn':['" +validateId+ "','" +validateError+ "','true']}" );[/b]??
  27. ????????}??
  28. ????????}catch (Exception?e){??
  29. ????????????e.printStackTrace();??
  30. ????????}??
  31. ??????????
  32. ????}??


上面加粗的地方就是前台页面需要的东东

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.