liferay中使用jQuery Validation Engine进行ajax验证,不通过也提交表单的解决方案

深碍√TFBOYSˉ_ 2022-08-25 08:46 125阅读 0赞

1.因项目需求,要对某个字段进行ajax验证,在上一篇博客([http://blog.csdn.net/u013310075/article/details/17652501][http_blog.csdn.net_u013310075_article_details_17652501])中详细介绍了liferay中集成jQuery Validation Engine的过程,但发现有一个bug(ajax验证不通过也提交表单),网上很多朋友通过修改源码暂时解决了这个问题,但我尝试后并不奏效,于是寻求另外的解决方案,下面的这种方案可能并不是一种特别好解决方案,如果有更好的解决方案,欢迎大家一起探讨.

2.解决方案:在提交表单前在进行一次ajax校验,返回一个状态,如果通过则提交表单,不通过,则不提交.下面是具体的实现

<%@ include file="/html/merchant/validationEngine-cn.jsp"%>
    
    <%
    	String rootPath = renderRequest.getContextPath();
    %>
    <link rel="stylesheet" href="<%=rootPath%>/css/formValidator/validationEngine.jquery.css" type="text/css"/>
    <script type="text/javascript"  src="<%=rootPath%>/js/formValidator/jquery.validationEngine.js"></script>
    
    
    <portlet:resourceURL id="queryAppCode" var="queryAppCode"/>
    
    <form action="${publish}" name="merchantForm" id="merchantForm" method="post">
    	<input type="text" name="appCode" value="${merchant.appCode}" class="validate[required,maxSize[200],custom[onlyLetterNumber],ajax[ajaxAppCodeCall]]" id="appCode">
    	//这是提交表单的button
    	<input type="button" value="保存"οnclick="sendmg()">
    </form>
    
    <script type="text/javascript">
    	jQuery(document).ready(function(){
    		jQuery("#merchantForm").validationEngine();
    	});
    	function sendmg() {
    		var appCode = $("#appCode").val();
    		$.ajax({
    		    url: '${queryAppCode}&appCode='+appCode,
    		     type: 'post',
    		    dataType: 'text',
    		    timeout: 5000,
    		    error: function(){},
    			success: function(result) {
    				//alert('成功返回'+result);
    				if(result=='success') {
    					//成功,则提交表单
    					merchantForm.submit();			
    				}else {
    					//失败,阻止表单提交
    					$("#merchantForm").validationEngine("validate");
    					return false;
    				}
    			}
    	});
    </script>
    
    //后台可以这样处理
    public void serveResource(ResourceRequest resourceRequest,
    			ResourceResponse resourceResponse) throws IOException,
    			PortletException {
    				String reString = resourceRequest.getResourceID();
    				if(reString.equals("queryAppCode")) {
    					PrintWriter out = resourceResponse.getWriter();
    					String appCode = ParamUtil.getString(resourceRequest, "appCode");
    					//查询数据库
    					Merchant merchant =
    						MerchantLocalServiceUtil.getMerchantByAppCode(appCode);
    					String result;
    					if (Validator.isNotNull(merchant)) {
    						//如果数据库中有这个appCode,则返回失败
    						result = "failure";
    					}
    					else {
    						result = "success";
    					}
    					out.print(result);
    					out.flush();
    					out.close();
    				}
    				super.serveResource(resourceRequest, resourceResponse);
    			}

在validationEngine-cn.jsp还要这么定义下:

<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
    <%@ include file="/html/common/init.jsp"%>
    
    <portlet:resourceURL var="appCodeAjaxUrl">
    	<portlet:param name="p_p_resource_id" value="checkAppCode"/>
    </portlet:resourceURL>
    //找到一些ajaxxxx的后面添加一个
    "ajaxAppCodeCall" : {
    					"url" : "<%=appCodeAjaxUrl%>",
    					// you may want to pass extra data on the ajax call
    					"alertText" : "* 该便民店编码已存在,请重新输入!",
    					"alertTextLoad" : "* 验证中, 请稍等...",
    					"alertTextOk" : "* 恭喜,该便民店编码可用!"
    				},
    
    
    //后台处理代码
    public void serveResource(ResourceRequest resourceRequest,
    			ResourceResponse resourceResponse) throws IOException,
    			PortletException {
    				String reString = resourceRequest.getResourceID();
    				if (reString.equals("checkAppCode")) {
    					PrintWriter out = resourceResponse.getWriter();
    					// appCodeNameName就是input输入文本框的id
    					String appCodeName =
    						ParamUtil.getString(resourceRequest, "fieldId");
    					String appCodeValue =
    						ParamUtil.getString(resourceRequest, "fieldValue");
    					Gson gson = new Gson();
    					String[] appCodeValidators = new String[2];
    					Merchant merchant =
    						MerchantLocalServiceUtil.getMerchantByAppCode(appCodeValue);
    					if (Validator.isNotNull(merchant)) {
    						appCodeValidators[0] = "appCode";
    						appCodeValidators[1] = "";// 表示appCode被占用，在新版本中应该用screenValidators[1]
    					}
    					else {
    						appCodeValidators[0] = "appCode";
    						appCodeValidators[1] = "true";// 表示appCode可用
    					}
    					String str = gson.toJson(appCodeValidators);
    					out.print(str);
    					out.flush();
    					out.close();
    				}
    			}

经过以上处理,就可以防止验证不通过也提交表单情况的发生.

[http_blog.csdn.net_u013310075_article_details_17652501]: http://blog.csdn.net/u013310075/article/details/17652501