liferay集成jQuery Validation Engine 表单验证及ajax的运用

超、凢脫俗 2022-09-19 14:23 201阅读 0赞

jQuery Validation Engine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具，其优点是自定义验证内容更广泛以及与AJAX的方便整合。适用于日常的 E-mail、电话号码、网址等验证等及 Ajax 验证，除自身拥有丰富的验证规则外，还可以添加自定义的验证规则。兼容 IE 6+， Chrome，Firefox,，Safari， Opera 10+

个人感觉这样的效果还是比较优雅的，下面主要讲解一下在liferay中如何集成及ajax的运用。

先看一下效果图

![SouthEast][]

1.到github上下载它的最新版本，地址:[https://github.com/posabsolute/jQuery-Validation-Engine][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"%>  
      
    <%@ 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> 
                
                 
               <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][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"%>  
      
      
      
    <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的验证。

[SouthEast]: /images/20220828/37e44e4c1ed842f4b9b1857bc28865da.png
[https_github.com_posabsolute_jQuery-Validation-Engine]: https://github.com/posabsolute/jQuery-Validation-Engine
[http_www.huqiwen.com_2012_10_21_liferay-6-1-development-study-10-use-ajax]: http://www.huqiwen.com/2012/10/21/liferay-6-1-development-study-10-use-ajax