关于jquery的验证框架
主要用到了以下几个文件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;" > <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">&nbsp;</td> <td height="139">&nbsp;</td> <td width="61" rowspan="5">&nbsp;<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">&nbsp;</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 value="" class="validate,length,ajax]" type="text" name="taskName" id="taskName" /> </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,length]"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,length]"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,length]" 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,length]" 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="添 加" /> </td></tr></table></td></tr> </table> </td></tr></table> <!-- -------------------- --> </td></tr><tr> <td height="91">&nbsp;</td></tr></table></td></tr></table></form></body></html>
注意 上面有部分粗体标示的地方 是用来验证用户名是否重复的（这里折腾了好久才出来）
在 jquery.validationEngine-cn.js中有这样一段
"ajaxUser":{"file":"syncTask!val.action","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){out.println("{'jsonValidateReturn':['"+validateId+"','"+validateError+"','false']}");}else{out.println("{'jsonValidateReturn':['"+validateId+"','"+validateError+"','true']}");}}catch(Exception e){e.printStackTrace();}}
上面加粗的地方就是前台页面需要的东东
页:
[1]