在开发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()); } }); });
这里限于篇幅,只展示了主要逻辑代码,若想查看完整源码,可以查看我的Github仓库:https://github.com/wdmcygah/research-spring。其中仓库里面有些与本博文不相关的代码,注意区分。
代码在JDK1.8、chrome浏览器下测试通过。测试访问地址:http://localhost:8080/spring/register/show.htm,如果想完全地测试后台校验,需要把文中的JS校验方法注释掉,或者把浏览器的JS禁用。
相关推荐
在本示例中,我们将探讨如何使用WebSocket进行前后台交互,以及涉及的关键Java技术和HTML实现。 首先,我们来看`WebSocket.html`,这是前端部分。在HTML中,WebSocket API被用来创建到服务器的WebSocket连接。通过`...
- **sample.html**:这个文件可能是框架的一个示例页面,展示如何在实际项目中使用后台JS校验框架。通过查看这个文件,开发者可以学习如何配置和调用验证函数,以及如何处理验证结果。 - **ReadMe.txt**:这是一个...
PHP抽奖前后台+转盘+数据库完整示例
### 后台校验框架详解 #### 一、概述 后台校验框架是软件开发过程中一个重要的组成部分,尤其是在Web应用中。它可以帮助开发者确保输入的数据符合预期的格式和规则,从而减少错误的发生并提高系统的健壮性。在Java...
在Spring MVC中,后台校验是确保数据输入正确性的重要环节,它可以防止无效或错误的数据进入系统,从而保护数据的完整性和系统的稳定性。本文将详细讨论如何在Spring MVC 3.2版本中实现后台校验。 首先,我们需要...
微信抽奖源码PHP前后台+转盘+数据库完整示例
SM4 前后台加密,亲测可用,有完成的示例代码,提供了 ECB加CBC两种加密方式及示列
"非常好用的后台校验jar包" 提供了一种高效的方法来处理这一任务,通过注解的方式简化了代码,让开发者能够更专注于业务逻辑的实现,而不是繁琐的数据验证。 该jar包的核心是利用注解来定义和实施校验规则。在Java...
NULL 博文链接:https://fins.iteye.com/blog/283672
GustureLock是一个关于手势锁的Android示例项目,它可能包含了手势设置、验证、反馈以及App前后台状态监控等功能。开发者可以参考该项目的源代码,学习如何实现手势锁组件,并结合自己的应用需求进行定制。 总结,...
"ecshop后台分页示例代码"是针对ECShop后台进行分页功能实现的一个示例,下面我们将详细探讨这个主题。 首先,`article.php`是ECShop后台管理文章时的核心文件,其中包含了处理文章数据逻辑的部分。在这个示例中,...
这个"ASP后台管理示例大综合"压缩包显然提供了多种ASP编程的实例,帮助开发者了解和学习如何构建后台管理系统。后台管理系统通常用于网站的内部管理,包括用户管理、数据管理、权限控制等功能。 在ASP中,后台管理...
在本篇教程中,我们将探讨如何在Django框架中使用Ajax技术实现前后台的数据交互。Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下,与服务器交换数据并更新部分网页的技术。在Django中,...
包含html-CSS-javascript-vue-element等多项基础知识课件详解,为web开发提供基础技术。并包含一个web项目的示例代码,利于掌握Java后台和前端的程序设计流程。
在这个"jQuery EasyUI 1.25静态后台 页面示例"中,我们可以关注以下几个关键知识点: 1. **静态页面**:这里的“静态”指的是网页的内容在服务器端不进行动态生成,而是直接返回预设好的HTML文件。这种结构对于开发...
基于ajax方式的跨域请求jsonp的前后台代码