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();
});
4.接下来我们打开validationEngine-cn.jsp页面,找到ajaxScreenNameCall对象,这个是我自己定义的,可以模仿其他的ajax对象定义即可,这里还有一个知识点,在liferay环境下如何发送ajax?这个可以参考冷月的博客
http://www.huqiwen.com/2012/10/21/liferay-6-1-development-study-10-use-ajax
<%@ 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);
}
6.经过以上几步,当输入文本框失去焦点时,就能进行ajax的验证。