关于jquery的验证框架jquery.validationEngine

程序员文章站 2022-06-12 11:49:41

...

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

Java代码

<%@ 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中有这样一段

Java代码

"ajaxUser" :{
"file" : "[i]syncTask!val.action[/i]" ,
"alertTextOk" : "* 帐号可以使用." ,
"alertTextLoad" : "* 检查中, 请稍后..." ,
"alertText" : "* 帐号不能使用." },

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

Java代码

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();
}
}

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

上一篇： jQuery弹出层插件大全

下一篇： ZooKeeper学习之关于Servers和Watches

关于jquery的验证框架jquery.validationEngine

jQuery使用正则验证15/18身份证的方法示例

Flask框架中密码的加盐哈希加密和验证功能的用法详解

详解ABP框架的参数有效性验证和权限验证

使用jQuery如何写一个含验证码的登录界面

jquery库的作用（web后端主流框架）

关于java 图形验证码的解决方法

jQuery.Validate表单验证插件的使用示例详解

关于Yii2框架跑脚本时内存泄漏问题的分析与解决

关于C#.net winform程序验证moss的集成身份认证实例

在Python的Flask框架中验证注册用户的Email的方法