关于jquery的验证框架

最新推荐文章于 2022-09-20 08:40:08 发布

Epiphone

最新推荐文章于 2022-09-20 08:40:08 发布

阅读量132

点赞数

分类专栏： Ajax 文章标签：框架 jQuery Ajax CSS Oracle ViewUI

本文链接：https://blog.csdn.net/Epiphone/article/details/83669649

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

主要用到了以下几个文件
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"> </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中有这样一段


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

	}

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

Epiphone

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于jquery的验证框架

主要用到了以下几个文件1 js文件 jquery.validationEngine.js | jquery.validationEngine-cn.js | jquery.js2 css文件 validationEngine.jquery.css3 在需要验证的页面引入以上文件[code="java"] ...
复制链接

扫一扫

专栏目录