本文主要是介绍liferay集成jQuery Validation Engine 表单验证及ajax的运用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
jQuery Validation Engine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具，其优点是自定义验证内容更广泛以及与AJAX的方便整合。适用于日常的 E-mail、电话号码、网址等验证等及 Ajax 验证，除自身拥有丰富的验证规则外，还可以添加自定义的验证规则。兼容 IE 6+， Chrome，Firefox,，Safari， Opera 10+
个人感觉这样的效果还是比较优雅的，下面主要讲解一下在liferay中如何集成及ajax的运用。
先看一下效果图
1.到github上下载它的最新版本，地址:https://github.com/posabsolute/jQuery-Validation-Engine
2.由于在liferay中可采用
<portlet:resourceURL></portlet:resourceURL>标签发送ajax请求，为了方便，故将jquery.validationEngine-cn.js修改为jquery.validationEngine-cn.jsp， 文件，具体操作是，在jsp页面头部添加
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%><script type="text/javascript">//这里放那些js函数,即jquery.validationEngine-cn.js里的function函数</script>保存，然后放到和表单页面同一目录文件夹下。
3.在表单页面引入以下文件，首先利用request获取上下文
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!--可以根据自己的存放路径做修改，我是把该文件放在了/html/user/目录下-->
<%@ include file="/html/user/validationEngine-cn.jsp"%>
<!--获取上下文-->
<% String rootPath = request.getContextPath();
%>
<link rel="stylesheet" href="<%=rootPath%>/css/formValidator/validationEngine.jquery.css" type="text/css"/>
<script type="text/javascript" src="<%=rootPath%>/js/jquery.1.8.1.js">
<script type="text/javascript" src=<%=rootPath%>/js/formValidator/jquery.validationEngine.js">
<!--下面就是要验证的表单,只做功能演示，故没设置表格样式-->
<portlet:actionURL var="add" name="addUser"/>
<form action="${add}" name="userForm" id="userForm" method="post"><table> <tr> <td> <span>屏幕显示名称：</span> </td> <td> <!--validator Engine的验证规则可参考官方文档，这里主要针对liferay下ajax的验证--> <!--添加class，各种验证与，分割，ajax[ajaxScreenNameCall]]就是一个ajax验证，调用了validationEngine-cn.jsp的ajaxScreenNameCall对象，该对象的名字可以随便，只要规则符合文档要求即可，这里需要注意，给input标签添加name和id属性，并保持值的一致性，发送ajax时会传递三个参数，具体是哪三个参数会在接下来讲--> <input type="text" name="screenName" id="screenName"class="validate[required,custom[onlyLetterSp],maxSize[200],ajax[ajaxScreenNameCall]]" /> </td> </tr> </table>
<!--进行验证的设置，可参考官方文档，这里只采用了简单的设置，失去焦点的时候会验证，提交表单的时候也会验证--><br>
<script type="text/javascript"> jQuery(document).ready(function(){jQuery("#userAccountForm").validationEngine(); });
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%> <!--发送ajax请求，默认是失去焦点的时候开始发送ajax请求，后台更具ajax的id（在这里ajax的id为checkScreenName）判断，执行不同的逻辑-->
<!--提交ajax请求的时候会发送三个参数到后台，即fieldId,fieldValue,extraData,其中fieldId是input标签的id，fieldValue是input文本框输入的值，
exreaData是额外的参数
-->
<portlet:resourceURL var="screenAjaxUrl"> <portlet:param name="p_p_resource_id" value="checkScreenName"/>
</portlet:resourceURL> <script type="text/javascript"> //这里放那些js函数,即jquery.validationEngine-cn.js的函数，各个属性的作用已经很明显了，不在做说明 "ajaxScreenNameCall" : { "url" : "<%=screenAjaxUrl%>", // you may want to pass extra data on the ajax call "extraData": "name=eric", "alertText" : "* 该屏幕显示名称被占用,请重新输入!", "alertTextLoad" : "* 验证中, 请稍等...", "alertTextOk" : "* 恭喜,该屏幕显示名称可用!" },
</script> 5.接下来在后台可以接收ajax发送过来的数据了
@Override
public void serveResource(ResourceRequest resourceRequest,ResourceResponse resourceResponse) throws IOException,PortletException { //resourceId是ajax的id String resourceId = resourceRequest.getResourceID(); if（resourceId.equals("checkScreenName")）{ PrintWriter out = resourceResponse.getWriter(); //screenName就是input输入文本框的id String screenName = ParamUtil.getString(resourceRequest, "fieldId"); //screenNameValue就是输入文本框的值 String screenNameValue = ParamUtil.getString(resourceRequest,"fieldValue"); /*接下来就是查询数据库，判断，把值out出去，如何在jsp页面提示验证成功与否呢？ 只要设置screeName的值为true或者false并按特定格式返回即可，json格式如下： ["screenName","true"]这个是提示成功的json格式 ["screenName","false"]这个是提示失败的json格式 可能我用的版本有点老，返回非空提示成功，返回空提示失败，即 ["screenName","true"]提示成功 ["screenName",""]提示失败 这种格式的json很好拼接，这里给出一种用数组拼接的方式*/ //1.根据screenNameValue查询数据库boolean result = xxxxLocalServiceUtil.getxxxx(screenNameValue); //2.判断是否存在，并返回json数据Gson gson = new Gson(); //google提供的转换出json格式的类String[] screenValidators = new String[2]; if(result) { screenValidators[0] = "screenName"; screenValidators[1] = "";//表示屏幕显示名称占用，在新版本中应该用screenValidators[1] = "false" }else { screenValidators[0] = "screenName"; screenValidators[1] = "true";//表示屏幕显示名称可用 } String str = gson.toJson(screenValidators); out.print(str); out.flush(); out.close(); super.serveResource(resourceRequest, resourceResponse);
}
这篇关于liferay集成jQuery Validation Engine 表单验证及ajax的运用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
