SpringMVC學習系列-後記 結合SpringMVC和Hibernate-validator，根據後臺驗證規則自動生成前臺的js驗證程式碼
阿新 • • 發佈：2018-12-29
在SpringMVC學習系列（6） 之 資料驗證中我們已經學習瞭如何結合Hibernate-validator進行後臺的資料合法性驗證，但是通常來說後臺驗證只是第二道保險，為了更好的使用者體驗會現在前端進行js驗證，驗證通過之後資料才能提交到後臺，那麼我們不可避免的要在前端的頁面中寫對應的js驗證程式碼。
但是這樣就需要進行一些很麻煩且重複的操作：
1.首先要保證前端和後臺的驗證規則要相同，避免出現前端驗證通過，提交後又出現驗證失敗的情況。
2.其次要保證前端和後臺的驗證規則要同步，即修改一邊的驗證規則後要修改另一邊對應的驗證規則。
3.要保證錯誤提示資訊的一致和相應的國際化問題。（其實這個問題在js驗證程式碼中提示錯誤資訊的地方，繫結國際化資訊可以解決，只是比較囉嗦。）
好吧~~~以上這些都不是主要原因，主要原因是我太懶了不想在每個頁面中再一個一個寫對應的js驗證程式碼，那麼如何才能讓後臺根據我們定義的模型驗證規則自動生成前端的js驗證程式碼呢？
下面一步一步來：
首先我想像spring mvc的form標籤一樣<form:form modelAttribute="contentModel" method="post">，這樣指定一下就可以生成對應的前端程式碼，簡潔優雅，多爽！，那麼我們就要先自定義taglib標籤。
1.新增一個類，這裡就叫JsValidateTag，我是定義在com.demo.test包下面的。
2.在WebContent/WEB-INF目錄下面新增一個xml檔案，我這裡名稱叫test.tld內容如下：
<?xml version="1.0" encoding="UTF-8"?> <taglib xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd" version="2.0"> <description>Test</description> <tlib-version>1.0</tlib-version> <short-name>test</short-name> <uri>http://www.mytest.org/tags/test</uri> <tag> <description></description> <name>jsValidate</name> <tag-class>com.demo.test.JsValidateTag</tag-class> <body-content>empty</body-content> <attribute> <description>Path to property for data binding</description> <name>modelAttribute</name> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> </tag> </taglib>
上面的內容很簡單，就是定義了一個叫jsValidate的標籤，對應的類是com.demo.test.JsValidateTag就是我們之前新建的那個，然後有一個叫modelAttribute的引數。
3.接下來在我們新建的類裡面實現具體的處理邏輯，程式碼如下：
package com.demo.test; import java.lang.reflect.Field; import java.util.ArrayList; import java.util.HashMap; import java.util.Iterator; import java.util.List; import java.util.Map; import java.util.Map.Entry; import javax.servlet.jsp.JspException; import org.hibernate.validator.constraints.Email; import org.hibernate.validator.constraints.NotEmpty; import org.hibernate.validator.constraints.Range; import org.springframework.web.servlet.tags.form.AbstractFormTag; import org.springframework.web.servlet.tags.form.TagWriter; /** * * 自動生成前臺js驗證程式碼 * @author [email protected] * */ @SuppressWarnings("serial") public class JsValidateTag extends AbstractFormTag { @SuppressWarnings("unused") private TagWriter tagWriter; private String modelAttribute; public void setModelAttribute(String modelAttribute) { this.modelAttribute = modelAttribute; } public String getModelAttribute() throws JspException { String resolvedModelAttribute = (String) evaluate("modelAttribute", this.modelAttribute); return (resolvedModelAttribute != null ? resolvedModelAttribute : ""); } @Override protected int writeTagContent(TagWriter tagWriter) throws JspException { Object model; if(getRequestContext().getModel()!=null) model=getRequestContext().getModel().get(getModelAttribute()); else model=this.pageContext.getRequest().getAttribute(getModelAttribute()); if(model!=null){ Map<String, List<String[]>> fieldValidateMap=new HashMap<String, List<String[]>>(); try { Field[] theFields=model.getClass().getDeclaredFields(); if(theFields!=null&& theFields.length>0){ for(Field field : theFields){ String fieldName=field.getName(); List<String[]> fieldValidateList=new ArrayList<String[]>(); NotEmpty notEmpty=field.getAnnotation(NotEmpty.class); if(notEmpty!=null){ String messageName=notEmpty.message(); fieldValidateList.add(new String[]{"required","true",getRequestContext().getMessage(messageName.substring(1, messageName.length()-1))}); } Email email=field.getAnnotation(Email.class); if(email!=null){ String messageName=email.message(); fieldValidateList.add(new String[]{"email","true",getRequestContext().getMessage(messageName.substring(1, messageName.length()-1))}); } Range range=field.getAnnotation(Range.class); if(range!=null){ String messageName=range.message(); fieldValidateList.add(new String[]{"range","["+range.min()+","+range.max()+"]",getRequestContext().getMessage(messageName.substring(1, messageName.length()-1))}); } if(fieldValidateList.size()>0){ fieldValidateMap.put(fieldName, fieldValidateList); } } } }catch (SecurityException e1) { e1.printStackTrace(); } if(fieldValidateMap.size()>0){ StringBuilder rulesBuilder=new StringBuilder(); StringBuilder messagesBuilder=new StringBuilder(); rulesBuilder.append("rules:{"); messagesBuilder.append("messages:{"); int i=0; Iterator<Entry<String, List<String[]>>> iterator=fieldValidateMap.entrySet().iterator(); while(iterator.hasNext()){ Entry<String, List<String[]>> entry=iterator.next(); rulesBuilder.append(entry.getKey()).append(":{"); messagesBuilder.append(entry.getKey()).append(":{"); int j=0; for(String[] array : entry.getValue()){ rulesBuilder.append(array[0]).append(":").append(array[1]); messagesBuilder.append(array[0]).append(":\"").append(array[2]).append("\""); if(j<entry.getValue().size()-1){ rulesBuilder.append(","); messagesBuilder.append(","); } j++; } rulesBuilder.append("}"); messagesBuilder.append("}"); if(i<fieldValidateMap.size()-1){ rulesBuilder.append(","); messagesBuilder.append(","); } i++; } rulesBuilder.append("},"); messagesBuilder.append("}"); tagWriter.startTag("script"); tagWriter.writeAttribute("type", "text/javascript"); tagWriter.appendValue("$(function() {"); tagWriter.appendValue("$(\"#"); tagWriter.appendValue(getModelAttribute()); tagWriter.appendValue("\").validate({"); //在失去焦點時驗證 tagWriter.appendValue("onfocusout:function(element){$(element).valid();},"); tagWriter.appendValue(rulesBuilder.toString()); tagWriter.appendValue(messagesBuilder.toString()); tagWriter.appendValue("});"); tagWriter.appendValue("});"); tagWriter.endTag(true); } } this.tagWriter=tagWriter; return EVAL_BODY_INCLUDE; } @Override public void doFinally() { super.doFinally(); this.tagWriter = null; } }
4.接下來在頁面中引用我們自定義的標籤：
<%@ taglib prefix="test" uri="http://www.mytest.org/tags/test" %>
並指定模型名稱：
<test:jsValidate modelAttribute="contentModel"></test:jsValidate>
頁面整體內容如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib prefix="test" uri="http://www.mytest.org/tags/test" %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="<c:url value='/js/jquery-1.10.2.min.js'/>" type="text/javascript"></script> <script src="<c:url value='/js/jquery.validate.min.js'/>" type="text/javascript"></script> </head> <body> <form:form modelAttribute="contentModel" method="post"> <form:errors path="*"></form:errors><br/><br/> name：<form:input path="name" /><br/> <form:errors path="name"></form:errors><br/> age：<form:input path="age" /><br/> <form:errors path="age"></form:errors><br/> email：<form:input path="email" /><br/> <form:errors path="email"></form:errors><br/> <input type="submit" value="Submit" /> </form:form> </body> <test:jsValidate modelAttribute="contentModel"></test:jsValidate> </html>
好了執行測試看看效果吧：
啊哈哈哈哈哈~~~，已經生成好了~~~
注：以上的程式碼只實現了@NotEmpty、@Range、@NotEmpty三個註解對應的js驗證規則，其它註解的js驗證規則在JsValidateTag類中新增相應的邏輯即可。