`
pany
  • 浏览: 90550 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

关于jquery的验证框架

    博客分类:
  • Ajax
阅读更多
主要用到了以下几个文件
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;" 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">&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;">
           [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">&nbsp;</td>
  </tr>
</table>
</td></tr></table>
</form>

  </body>
</html>

注意 上面有部分粗体标示的地方 是用来验证用户名是否重复的(这里折腾了好久才出来)
在 jquery.validationEngine-cn.js中有这样一段
"ajaxUser":{
						"file":"[i]syncTask!val.action[/i]",
						"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){
			
			[b]out.println("{'jsonValidateReturn':['"+validateId+"','"+validateError+"','false']}");[/b]
		}else{
			[b]out.println("{'jsonValidateReturn':['"+validateId+"','"+validateError+"','true']}");[/b]
		}
		}catch(Exception e){
			e.printStackTrace();
		}
		
	}

上面加粗的地方就是前台页面需要的东东
分享到:
评论

相关推荐

    jquery验证框架使用

    **jQuery验证框架使用详解** jQuery验证框架是一款广泛应用于前端开发中的轻量级验证插件,它可以帮助开发者轻松实现表单数据的有效性验证,确保用户输入的数据符合预设规则,提高用户体验,减少服务器端的压力。本...

    Jquery验证框架

    **jQuery验证框架**是一种在Web开发中用于前端数据验证的工具,它极大地简化了JavaScript验证的复杂性。jQuery库的强大功能结合验证插件,能够帮助开发者创建用户友好的、响应迅速的表单验证机制,确保用户输入的...

    JQuery验证框架

    JQuery验证框架JQuery验证框架JQuery验证框架

    jQuery好的验证框架

    **jQuery验证框架** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。在Web开发中,数据验证是必不可少的一环,用于确保用户输入的有效性和安全性。jQuery验证框架...

    jquery校验框架

    **jQuery验证框架详解** jQuery,一个轻量级、高性能的JavaScript库,因其简洁的API和强大的功能,成为了前端开发中的必备工具。其中,jQuery验证框架是用于实现表单验证的重要组成部分,它使得开发者能够轻松地为...

    jquery验证框架学习

    【jQuery验证框架学习】 jQuery是一个广泛使用的JavaScript库,它的核心特性是简化HTML文档遍历、事件处理、动画设计和Ajax交互。本教程旨在带你深入了解jQuery验证框架,这是一套用于前端数据验证的工具,能够帮助...

    JQuery验证框架及事例

    资源包中的帮助文档可能包含了关于jQuery验证框架和分页技术的详细指南,包括API参考、示例代码和常见问题解答。阅读这些文档可以帮助开发者更好地理解和应用这些技术。 总结,本资源包提供了jQuery验证框架的实例...

    jquery验证框架学习教程

    jQuery验证框架学习教程详细介绍了jQuery及其验证插件的使用方法,旨在帮助开发者快速掌握jQuery这一强大的JavaScript库,并学会如何使用其提供的验证功能来增强Web应用的用户交互体验。 首先,jQuery是一个开源的...

    很不错的验证框架jquery

    标题中的“很不错的验证框架jquery”指的是jQuery Validation Plugin,这是一个非常流行且功能强大的JavaScript库,专门用于HTML表单验证。jQuery本身是一个轻量级的JavaScript库,极大地简化了DOM操作、事件处理和...

    jquery 前端验证框架

    **二、jQuery验证框架的重要性** 前端验证不仅能够即时反馈用户输入错误,提高用户交互体验,还能减少服务器端的压力,避免无效请求。jQuery的验证框架提供了一套灵活、可定制的验证规则,使开发者可以快速构建表单...

    jQuery验证框架学习笔记.pdf

    jQuery验证框架是一个强大的JavaScript库,用于在客户端进行表单验证,极大地提高了用户界面的交互性和用户体验。本笔记主要涵盖了框架的各个重要方面,包括可选项、插件方法、选择器和实用工具、验证器、内置验证...

    jquery验证框架,好用实用。。。

    **jQuery验证框架详解** jQuery Validate 是一个非常流行的前端验证插件,它为HTML表单提供了强大的验证功能。这个插件是jQuery库的一个扩展,能够帮助开发者轻松实现对用户输入数据的有效性检查,确保数据在提交前...

    jQuery验证框架内置验证方法validate

    ### jQuery验证框架内置验证方法validate #### 一、概述 jQuery验证框架,即`jquery.validate.js`,是一款非常实用的JavaScript库,它为Web开发者提供了简单而强大的客户端表单验证功能。通过使用此插件,可以轻松...

    jQuery验证框架

    ### jQuery验证框架详解 #### 一、概述 jQuery Validation Plugin 是一个非常强大的验证插件,它可以帮助开发者轻松地实现客户端表单验证功能。此插件是基于jQuery开发的,因此可以充分利用jQuery的强大功能来简化...

    JQuery验证框架alphanumeric

    Jquery表单验证框架 jquery.alphanumeric.js

    jQuery表单验证框架

    总的来说,jQuery Validate框架通过提供丰富的验证规则、回调函数和自定义选项,使得在HTML表单中实现复杂的验证逻辑变得简单易行。无论你是新手还是经验丰富的开发者,这个框架都能帮助你快速构建安全、用户友好的...

    JQuery验证框架 (实用)

    **jQuery验证框架详解** jQuery验证框架是一款非常实用的前端数据验证工具,它为开发者提供了便捷、高效的方法来确保用户在表单提交时输入的数据符合预设的规则。这个框架具有详细注释,易于理解,且经过了严格的...

Global site tag (gtag.js) - Google Analytics