前后台校验示例及讲解 前后台校验校验ValidationJqueryHibernate
在开发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
- <dependency>
- <groupId>org.hibernate</groupId>
- <artifactId>hibernate-validator</artifactId>
- <version>5.1.3.Final</version>
- </dependency>
二、后台Controller类
该类只是模拟注册功能,并有一个用户名是否存在判断逻辑,主要是为了体现前后台校验的用法,所以没写其它逻辑,实际情况肯定比这复杂得多。
- /**
- * 注册控制器
- * @author wdmcygah
- *
- */
- @Controller
- @RequestMapping("/register")
- public class RegisterController {
- /**
- * 注册页面展示
- */
- @RequestMapping("/show")
- public String register(){
- return "/register/show";
- }
- /**
- * 注册方法(主要为了演示使用Hibernate validation进行校验)
- */
- @RequestMapping(value="/create",method=RequestMethod.POST)
- public String doRegister(RegisterInfo info,Model model){
- //1、进行参数校验
- ValidationResult result = ValidationUtils.validateEntity(info);
- if( result.isHasErrors() ){
- model.addAttribute("errorMsg", result.getErrorMsg());
- return "/register/show";
- }
- //2、注册逻辑——省略
- model.addAttribute("successFlag", "1");
- return "/register/show";
- }
- /**
- * 判断用户名是否存在
- * 详细描述:
- * 1、这里只作简单的演示,若名称以y开头则返回存在。实际运用中可能是查询数据库
- * 2、注意这里用到@ResponseBody注解,表示返回值不是视图名,直接将返回值绑定到response body中
- * @param name
- * @return
- */
- @RequestMapping(value="isNameExists",method=RequestMethod.POST)
- @ResponseBody
- public String isNameExists( String name ){
- if( StringUtils.isEmpty(name) ){
- return "false";
- }
- //只有以'y'开头的名字才是不存在的
- if( name.startsWith("y") ){
- return "true";
- }
- return "false";
- }
- }
三、后台校验工具类
该类对Hibernate Validation方法进行了简单封装,实现校验实体对象的功能,返回是自定义的校验对象。
- /**
- * 校验工具类
- * @author wdmcygah
- *
- */
- public class ValidationUtils {
- private static Validator validator = Validation.buildDefaultValidatorFactory().getValidator();
- public static <T> ValidationResult validateEntity(T obj){
- ValidationResult result = new ValidationResult();
- Set<ConstraintViolation<T>> set = validator.validate(obj,Default.class);
- if( CollectionUtils.isNotEmpty(set) ){
- result.setHasErrors(true);
- Map<String,String> errorMsg = new HashMap<String,String>();
- for(ConstraintViolation<T> cv : set){
- errorMsg.put(cv.getPropertyPath().toString(), cv.getMessage());
- }
- result.setErrorMsg(errorMsg);
- }
- return result;
- }
- }
四、后台校验结果类
- /**
- * 校验结果
- * @author wdmcygah
- *
- */
- public class ValidationResult {
- //校验结果是否有错
- private boolean hasErrors;
- //校验错误信息
- private Map<String,String> errorMsg;
- public boolean isHasErrors() {
- return hasErrors;
- }
- public void setHasErrors(boolean hasErrors) {
- this.hasErrors = hasErrors;
- }
- public Map<String, String> getErrorMsg() {
- return errorMsg;
- }
- public void setErrorMsg(Map<String, String> errorMsg) {
- this.errorMsg = errorMsg;
- }
- @Override
- public String toString() {
- return "ValidationResult [hasErrors=" + hasErrors + ", errorMsg="
- + errorMsg + "]";
- }
- }
五、后台被校验对象
- /**
- * 注册信息
- * @author wdmcygah
- *
- */
- public class RegisterInfo {
- @NotBlank(message="名字不能为空或者空串")
- private String name;
- @NotBlank(message="密码不能为空或者空串")
- @Pattern(regexp="(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,10}",message="密码必须是5~10位数字和字母的组合")
- private String password;
- @NotBlank(message="邮箱不能为空或者空串")
- @Email(message="邮箱格式不正确")
- private String email;
- public String getName() {
- return name;
- }
- public void setName(String name) {
- this.name = name;
- }
- public String getPassword() {
- return password;
- }
- public void setPassword(String password) {
- this.password = password;
- }
- public String getEmail() {
- return email;
- }
- public void setEmail(String email) {
- this.email = email;
- }
- }
六、前台注册页面
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
- <!DOCTYPE html>
- <html lang="zh-cn">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <!-- Bootstrap -->
- <link href="<%=request.getContextPath()%>/statics/css/bootstrap.min.css"
- rel="stylesheet">
- <!-- 这里引入的是校验提示的样式 -->
- <link href="<%=request.getContextPath()%>/statics/css/valid.css"
- rel="stylesheet">
- </head>
- <body>
- <div class="container">
- <form action="create.htm" method="post" id="registerForm"
- class="form-horizontal" role="form">
- <fieldset class="text-center">
- <legend> 前后台校验功能测试页面 </legend>
- <c:choose>
- <c:when test="${successFlag=='1'}">
- 注册成功!
- <button type="button" class="btn btn-primary btn-large"
- onclick="window.location.href='show.htm' ">返回</button>
- </c:when>
- <c:otherwise>
- <div class="form-group">
- <label class="col-sm-4 control-label" for="name">姓名</label>
- <div class="col-sm-4">
- <input type="text" class="form-control" name="name" id="name">
- </div>
- <label class="error" for="name">${errorMsg.name}</label>
- </div>
- <div class="form-group">
- <label class="col-sm-4 control-label" for="password">密码</label>
- <div class="col-sm-4">
- <input type="password" class="form-control" name="password"
- id="password">
- </div>
- <label class="error" for="password">${errorMsg.password}</label>
- </div>
- <div class="form-group">
- <label class="col-sm-4 control-label" for="email">电子邮箱</label>
- <div class="col-sm-4">
- <input type="text" class="form-control" name="email" id="email">
- </div>
- <label class="error" for="email">${errorMsg.email}</label>
- </div>
- <div class="form-actions ">
- <button type="submit" class="btn btn-primary btn-large">提交</button>
- <button type="reset" class="btn">取消</button>
- </div>
- </c:otherwise>
- </c:choose>
- </fieldset>
- </form>
- </div>
- <!-- js -->
- <script
- src="<%=request.getContextPath()%>/statics/js/import/jquery-1.11.1.js"></script>
- <script
- src="<%=request.getContextPath()%>/statics/js/import/jquery.validate.js"></script>
- <script
- src="<%=request.getContextPath()%>/statics/js/import/bootstrap.min.js"></script>
- <!-- 这里引入的是校验提示信息的JS文件 -->
- <script
- src="<%=request.getContextPath()%>/statics/js/import/messages_zh.js"></script>
- <!-- 这里引入的是表单校验的JS文件 -->
- <script
- src="<%=request.getContextPath()%>/statics/js/my/register_validation.js"></script>
- <!-- 这里引入的是扩展Jquery validation的自定义JS文件 -->
- <script
- src="<%=request.getContextPath()%>/statics/js/my/additional-methods.js"></script>
- </body>
- </html>
七、前台校验JS
这里主要介绍下validate方法中的remote,后面跟的是一个ajax请求,判断名字是否存在,后台只用返回“true”或者“false”,表示校验是否通过就行了。这个在表单异步校验的时候非常实用。
- $(function() {
- $('#registerForm').validate({
- rules : {
- name : {
- required : true,
- remote : {
- url : "isNameExists.htm", //后台处理程序
- type : "post", //数据发送方式
- data : { //要传递的数据
- name : function() {
- return $("#name").val();
- }
- }
- }
- },
- password : {
- required : true,
- },
- email : {
- required : true,
- email : true
- }
- },
- messages:{
- name:{
- remote:"名字已经存在"
- }
- },
- success : "valid",
- errorClass : "error",
- errorPlacement : function(error, element) {
- error.appendTo(element.parent().parent());
- }
- });
- });
这里限于篇幅,只展示了主要逻辑代码.
转自:http://wdmcygah.iteye.com/blog/2174882