欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前后台校验示例及讲解 前后台校验校验ValidationJqueryHibernate

程序员文章站 2022-04-18 13:35:58
...

在开发Java Web程序时，前后校验逻辑应该是必不可少的一部分。其中，前台校验更多地是从用户体验的角度出发，而后台校验更多地是从数据安全的角度出发。本博文基于Spring MVC写了一个前台后台结合校验的示例，不过没有使用Spring MVC自带的校验框架。示例前台使用Jquery Validation进行校验，后台使用Hibernate Validation进行校验，所以示例所需要的校验逻辑并不依赖于Spring MVC，只要引入相应的校验包，即可在任何Java Web环境中实现校验功能。（使用Spring MVC自带校验逻辑进行校验，改天有空再写个示例）

如果Jquery Validation使用不熟悉的话，可以查看我的Jquery Validation实用示例及讲解
如果Hibernate Validation使用不熟悉的话，可以查看我的Hibernate Validation使用示例及讲解

下面直接上示例代码：
一、主要依赖

   jquery.validate.js 

Xml代码  前后台校验示例及讲解 前后台校验校验ValidationJqueryHibernate
  1. <dependency>  
  2.             <groupId>org.hibernate</groupId>  
  3.             <artifactId>hibernate-validator</artifactId>  
  4.             <version>5.1.3.Final</version>  
  5.         </dependency>  

 

 二、后台Controller类

该类只是模拟注册功能，并有一个用户名是否存在判断逻辑，主要是为了体现前后台校验的用法，所以没写其它逻辑，实际情况肯定比这复杂得多。

Java代码  前后台校验示例及讲解 前后台校验校验ValidationJqueryHibernate
  1. /** 
  2.  * 注册控制器 
  3.  * @author wdmcygah 
  4.  * 
  5.  */  
  6. @Controller  
  7. @RequestMapping("/register")  
  8. public class RegisterController {  
  9.   
  10.     /** 
  11.      * 注册页面展示 
  12.      */  
  13.     @RequestMapping("/show")  
  14.     public String register(){  
  15.         return "/register/show";  
  16.     }  
  17.       
  18.     /** 
  19.      * 注册方法（主要为了演示使用Hibernate validation进行校验） 
  20.      */  
  21.     @RequestMapping(value="/create",method=RequestMethod.POST)  
  22.     public String doRegister(RegisterInfo info,Model model){  
  23.         //1、进行参数校验  
  24.         ValidationResult result = ValidationUtils.validateEntity(info);  
  25.         if( result.isHasErrors() ){  
  26.             model.addAttribute("errorMsg", result.getErrorMsg());  
  27.             return "/register/show";  
  28.         }  
  29.           
  30.         //2、注册逻辑——省略  
  31.         model.addAttribute("successFlag", "1");  
  32.         return "/register/show";  
  33.     }  
  34.       
  35.     /** 
  36.      * 判断用户名是否存在 
  37.      * 详细描述： 
  38.      * 1、这里只作简单的演示，若名称以y开头则返回存在。实际运用中可能是查询数据库 
  39.      * 2、注意这里用到@ResponseBody注解，表示返回值不是视图名，直接将返回值绑定到response body中 
  40.      * @param name 
  41.      * @return 
  42.      */  
  43.     @RequestMapping(value="isNameExists",method=RequestMethod.POST)  
  44.     @ResponseBody  
  45.     public String isNameExists( String name ){  
  46.         if( StringUtils.isEmpty(name) ){  
  47.             return "false";  
  48.         }  
  49.         //只有以'y'开头的名字才是不存在的  
  50.         if( name.startsWith("y") ){  
  51.             return "true";  
  52.         }  
  53.         return "false";  
  54.     }  
  55. }  

 

三、后台校验工具类

该类对Hibernate Validation方法进行了简单封装，实现校验实体对象的功能，返回是自定义的校验对象。

Java代码  前后台校验示例及讲解 前后台校验校验ValidationJqueryHibernate
  1. /** 
  2.  * 校验工具类 
  3.  * @author wdmcygah 
  4.  * 
  5.  */  
  6. public class ValidationUtils {  
  7.   
  8.     private static Validator validator =  Validation.buildDefaultValidatorFactory().getValidator();  
  9.       
  10.     public static <T> ValidationResult validateEntity(T obj){  
  11.         ValidationResult result = new ValidationResult();  
  12.          Set<ConstraintViolation<T>> set = validator.validate(obj,Default.class);  
  13.          if( CollectionUtils.isNotEmpty(set) ){  
  14.              result.setHasErrors(true);  
  15.              Map<String,String> errorMsg = new HashMap<String,String>();  
  16.              for(ConstraintViolation<T> cv : set){  
  17.                  errorMsg.put(cv.getPropertyPath().toString(), cv.getMessage());  
  18.              }  
  19.              result.setErrorMsg(errorMsg);  
  20.          }  
  21.          return result;  
  22.     }  
  23.       
  24. }  

 

四、后台校验结果类

Java代码  前后台校验示例及讲解 前后台校验校验ValidationJqueryHibernate
  1. /** 
  2.  * 校验结果 
  3.  * @author wdmcygah 
  4.  * 
  5.  */  
  6. public class ValidationResult {  
  7.   
  8.     //校验结果是否有错  
  9.     private boolean hasErrors;  
  10.       
  11.     //校验错误信息  
  12.     private Map<String,String> errorMsg;  
  13.   
  14.     public boolean isHasErrors() {  
  15.         return hasErrors;  
  16.     }  
  17.   
  18.     public void setHasErrors(boolean hasErrors) {  
  19.         this.hasErrors = hasErrors;  
  20.     }  
  21.   
  22.     public Map<String, String> getErrorMsg() {  
  23.         return errorMsg;  
  24.     }  
  25.   
  26.     public void setErrorMsg(Map<String, String> errorMsg) {  
  27.         this.errorMsg = errorMsg;  
  28.     }  
  29.   
  30.     @Override  
  31.     public String toString() {  
  32.         return "ValidationResult [hasErrors=" + hasErrors + ", errorMsg="  
  33.                 + errorMsg + "]";  
  34.     }  
  35.   
  36. }  

 

五、后台被校验对象

Java代码  前后台校验示例及讲解 前后台校验校验ValidationJqueryHibernate
  1. /** 
  2.  * 注册信息 
  3.  * @author wdmcygah 
  4.  * 
  5.  */  
  6. public class RegisterInfo {  
  7.   
  8.     @NotBlank(message="名字不能为空或者空串")  
  9.     private String name;  
  10.       
  11.     @NotBlank(message="密码不能为空或者空串")  
  12.     @Pattern(regexp="(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,10}",message="密码必须是5~10位数字和字母的组合")  
  13.     private String password;  
  14.       
  15.     @NotBlank(message="邮箱不能为空或者空串")  
  16.     @Email(message="邮箱格式不正确")  
  17.     private String email;  
  18.   
  19.     public String getName() {  
  20.         return name;  
  21.     }  
  22.   
  23.     public void setName(String name) {  
  24.         this.name = name;  
  25.     }  
  26.   
  27.     public String getPassword() {  
  28.         return password;  
  29.     }  
  30.   
  31.     public void setPassword(String password) {  
  32.         this.password = password;  
  33.     }  
  34.   
  35.     public String getEmail() {  
  36.         return email;  
  37.     }  
  38.   
  39.     public void setEmail(String email) {  
  40.         this.email = email;  
  41.     }  
  42.       
  43. }  

 

六、前台注册页面

Html代码  前后台校验示例及讲解 前后台校验校验ValidationJqueryHibernate
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
  3.   
  4. <!DOCTYPE html>  
  5. <html lang="zh-cn">  
  6. <head>  
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  8. <!-- Bootstrap -->  
  9. <link href="<%=request.getContextPath()%>/statics/css/bootstrap.min.css"  
  10.     rel="stylesheet">  
  11. <!-- 这里引入的是校验提示的样式 -->  
  12. <link href="<%=request.getContextPath()%>/statics/css/valid.css"  
  13.     rel="stylesheet">  
  14. </head>  
  15. <body>  
  16.     <div class="container">  
  17.   
  18.         <form action="create.htm" method="post" id="registerForm"  
  19.             class="form-horizontal" role="form">  
  20.             <fieldset class="text-center">  
  21.                 <legend> 前后台校验功能测试页面 </legend>  
  22.                 <c:choose>  
  23.                     <c:when test="${successFlag=='1'}">  
  24.                             注册成功！  
  25.                                 <button type="button" class="btn btn-primary btn-large"  
  26.                             onclick="window.location.href='show.htm' ">返回</button>  
  27.                     </c:when>  
  28.                     <c:otherwise>  
  29.                         <div class="form-group">  
  30.                             <label class="col-sm-4 control-label" for="name">姓名</label>  
  31.                             <div class="col-sm-4">  
  32.                                 <input type="text" class="form-control" name="name" id="name">  
  33.                             </div>  
  34.                             <label class="error" for="name">${errorMsg.name}</label>  
  35.                         </div>  
  36.                         <div class="form-group">  
  37.                             <label class="col-sm-4 control-label" for="password">密码</label>  
  38.                             <div class="col-sm-4">  
  39.                                 <input type="password" class="form-control" name="password"  
  40.                                     id="password">  
  41.                             </div>  
  42.                             <label class="error" for="password">${errorMsg.password}</label>  
  43.                         </div>  
  44.                         <div class="form-group">  
  45.                             <label class="col-sm-4 control-label" for="email">电子邮箱</label>  
  46.                             <div class="col-sm-4">  
  47.                                 <input type="text" class="form-control" name="email" id="email">  
  48.                             </div>  
  49.                             <label class="error" for="email">${errorMsg.email}</label>  
  50.                         </div>  
  51.                         <div class="form-actions ">  
  52.                             <button type="submit" class="btn btn-primary btn-large">提交</button>  
  53.                             <button type="reset" class="btn">取消</button>  
  54.                         </div>  
  55.                     </c:otherwise>  
  56.                 </c:choose>  
  57.             </fieldset>  
  58.         </form>  
  59.     </div>  
  60.   
  61.     <!-- js -->  
  62.     <script  
  63.         src="<%=request.getContextPath()%>/statics/js/import/jquery-1.11.1.js"></script>  
  64.     <script  
  65.         src="<%=request.getContextPath()%>/statics/js/import/jquery.validate.js"></script>  
  66.     <script  
  67.         src="<%=request.getContextPath()%>/statics/js/import/bootstrap.min.js"></script>  
  68.     <!-- 这里引入的是校验提示信息的JS文件 -->  
  69.     <script  
  70.         src="<%=request.getContextPath()%>/statics/js/import/messages_zh.js"></script>  
  71.     <!-- 这里引入的是表单校验的JS文件 -->  
  72.     <script  
  73.         src="<%=request.getContextPath()%>/statics/js/my/register_validation.js"></script>  
  74.     <!-- 这里引入的是扩展Jquery validation的自定义JS文件 -->  
  75.     <script  
  76.         src="<%=request.getContextPath()%>/statics/js/my/additional-methods.js"></script>  
  77. </body>  
  78. </html>  

 

七、前台校验JS

这里主要介绍下validate方法中的remote，后面跟的是一个ajax请求，判断名字是否存在，后台只用返回“true”或者“false”，表示校验是否通过就行了。这个在表单异步校验的时候非常实用。

Js代码  前后台校验示例及讲解 前后台校验校验ValidationJqueryHibernate
  1. $(function() {  
  2.   
  3.     $('#registerForm').validate({  
  4.         rules : {  
  5.             name : {  
  6.                 required : true,  
  7.                 remote : {  
  8.                     url : "isNameExists.htm", //后台处理程序  
  9.                     type : "post", //数据发送方式  
  10.                     data : { //要传递的数据  
  11.                         name : function() {  
  12.                             return $("#name").val();  
  13.                         }  
  14.                     }  
  15.                 }  
  16.             },  
  17.             password : {  
  18.                 required : true,  
  19.             },  
  20.             email : {  
  21.                 required : true,  
  22.                 email : true  
  23.             }  
  24.         },  
  25.         messages:{  
  26.             name:{  
  27.                 remote:"名字已经存在"  
  28.             }  
  29.         },  
  30.         success : "valid",  
  31.         errorClass : "error",  
  32.         errorPlacement : function(error, element) {  
  33.             error.appendTo(element.parent().parent());  
  34.         }  
  35.     });  
  36. });  

 

这里限于篇幅，只展示了主要逻辑代码.

转自：http://wdmcygah.iteye.com/blog/2174882

 

相关标签： 前后台校验 校验 Validation Jquery Hibernate

上一篇： 在双十一中出圈的生鲜食品，迎来一场冷链大考？

下一篇： Spring验证小结和问题

推荐阅读