[置顶] 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(); 
    });  

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的验证。