欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

关于jquery的验证框架jquery.validationEngine  

程序员文章站 2022-06-12 11:56:05
...

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

Java代码  关于jquery的验证框架jquery.validationEngine  
  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代码  关于jquery的验证框架jquery.validationEngine  
  1. "ajaxUser" :{  
  2.                         "file" : "[i]syncTask!val.action[/i]" ,  
  3.                         "alertTextOk" : "* 帐号可以使用." ,    
  4.                         "alertTextLoad" : "* 检查中, 请稍后..." ,  
  5.                         "alertText" : "* 帐号不能使用." },     


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

Java代码  关于jquery的验证框架jquery.validationEngine  
  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.     }  


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

上一篇： Springboot shiro认证授权实现原理及实例

下一篇： SpringSide 3 的进步  

推荐阅读