前后台校验示例及讲解

在开发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