`
suliuyes
  • 浏览: 92485 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

关于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.     }  


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

分享到：
| 经典SQL语句大全
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics