`
wdmcygah
  • 浏览: 62428 次
社区版块
存档分类
最新评论

前后台校验示例及讲解

阅读更多

在开发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禁用。

 

 

3
2
分享到:
评论
4 楼 wdmcygah 2015-01-13  
yunpheng 写道
wdmcygah 写道
yunpheng 写道
“前后校验逻辑应该是必不可少的一部分。其中,前台校验更多地是从用户体验的角度出发,而后台校验更多地是从数据安全的角度出发。”

这句话总结的很到位!
前端做过的校验,到后端了还要再做。但是上面的例子中,“判断用户名是否存在”,在后端为什么没有再做校验呢?从数据安全的角度,如果用户绕过了前端,直接到后端了,应该要做校验
判断用户名是否存在做了校验,ajax请求到后台的,多用几组数据试下,例如“123”、“y123”

多谢回复!
可能我表述的不够明确,你这里前端使用Jquery Validation进行校验,后端使用Hibernate Validation进行校验,但我看了你的代码,“判断用户名是否存在”只是在前端做了校验(通过Jquery Validation的remote选项ajax请求到后台),后端Hibernate Validation里面并没有校验。如果我绕过你的前端页面,直接发起http请求到后端注册,那就不会经过前端的校验了,所以后端为了保证数据安全,应该进一步做校验,不是吗?
  是的,后台没有再检查是否重复,这里因为只是演示用法,所以没加,还是有失严谨。实际情况是需要保持一致的。你说得很对。
3 楼 yunpheng 2015-01-13  
wdmcygah 写道
yunpheng 写道
“前后校验逻辑应该是必不可少的一部分。其中,前台校验更多地是从用户体验的角度出发,而后台校验更多地是从数据安全的角度出发。”

这句话总结的很到位!
前端做过的校验,到后端了还要再做。但是上面的例子中,“判断用户名是否存在”,在后端为什么没有再做校验呢?从数据安全的角度,如果用户绕过了前端,直接到后端了,应该要做校验
判断用户名是否存在做了校验,ajax请求到后台的,多用几组数据试下,例如“123”、“y123”

多谢回复!
可能我表述的不够明确,你这里前端使用Jquery Validation进行校验,后端使用Hibernate Validation进行校验,但我看了你的代码,“判断用户名是否存在”只是在前端做了校验(通过Jquery Validation的remote选项ajax请求到后台),后端Hibernate Validation里面并没有校验。如果我绕过你的前端页面,直接发起http请求到后端注册,那就不会经过前端的校验了,所以后端为了保证数据安全,应该进一步做校验,不是吗?
2 楼 wdmcygah 2015-01-12  
yunpheng 写道
“前后校验逻辑应该是必不可少的一部分。其中,前台校验更多地是从用户体验的角度出发,而后台校验更多地是从数据安全的角度出发。”

这句话总结的很到位!
前端做过的校验,到后端了还要再做。但是上面的例子中,“判断用户名是否存在”,在后端为什么没有再做校验呢?从数据安全的角度,如果用户绕过了前端,直接到后端了,应该要做校验
判断用户名是否存在做了校验,ajax请求到后台的,多用几组数据试下,例如“123”、“y123”
1 楼 yunpheng 2015-01-12  
“前后校验逻辑应该是必不可少的一部分。其中,前台校验更多地是从用户体验的角度出发,而后台校验更多地是从数据安全的角度出发。”

这句话总结的很到位!
前端做过的校验,到后端了还要再做。但是上面的例子中,“判断用户名是否存在”,在后端为什么没有再做校验呢?从数据安全的角度,如果用户绕过了前端,直接到后端了,应该要做校验

相关推荐

    websocket 前后台示例

    在本示例中,我们将探讨如何使用WebSocket进行前后台交互,以及涉及的关键Java技术和HTML实现。 首先,我们来看`WebSocket.html`,这是前端部分。在HTML中,WebSocket API被用来创建到服务器的WebSocket连接。通过`...

    后台JS校验框架

    - **sample.html**:这个文件可能是框架的一个示例页面,展示如何在实际项目中使用后台JS校验框架。通过查看这个文件,开发者可以学习如何配置和调用验证函数,以及如何处理验证结果。 - **ReadMe.txt**:这是一个...

    PHP微信抽奖前后台+转盘+数据库完整示例

    PHP抽奖前后台+转盘+数据库完整示例

    后台校验框架

    ### 后台校验框架详解 #### 一、概述 后台校验框架是软件开发过程中一个重要的组成部分,尤其是在Web应用中。它可以帮助开发者确保输入的数据符合预期的格式和规则,从而减少错误的发生并提高系统的健壮性。在Java...

    springMVC3.2实现后台校验

    在Spring MVC中,后台校验是确保数据输入正确性的重要环节,它可以防止无效或错误的数据进入系统,从而保护数据的完整性和系统的稳定性。本文将详细讨论如何在Spring MVC 3.2版本中实现后台校验。 首先,我们需要...

    微信抽奖源码PHP前后台+转盘+数据库完整示例

    微信抽奖源码PHP前后台+转盘+数据库完整示例

    SM4 前后台加密及示例,源码

    SM4 前后台加密,亲测可用,有完成的示例代码,提供了 ECB加CBC两种加密方式及示列

    非常好用的后台校验 jar包

    "非常好用的后台校验jar包" 提供了一种高效的方法来处理这一任务,通过注解的方式简化了代码,让开发者能够更专注于业务逻辑的实现,而不是繁琐的数据验证。 该jar包的核心是利用注解来定义和实施校验规则。在Java...

    GT-Grid 1.36 版 前后台结合示例

    NULL 博文链接:https://fins.iteye.com/blog/283672

    手势设置 验证app前后台 监控

    GustureLock是一个关于手势锁的Android示例项目,它可能包含了手势设置、验证、反馈以及App前后台状态监控等功能。开发者可以参考该项目的源代码,学习如何实现手势锁组件,并结合自己的应用需求进行定制。 总结,...

    ecshop后台分页示例代码

    "ecshop后台分页示例代码"是针对ECShop后台进行分页功能实现的一个示例,下面我们将详细探讨这个主题。 首先,`article.php`是ECShop后台管理文章时的核心文件,其中包含了处理文章数据逻辑的部分。在这个示例中,...

    ASP后台管理示例大综合

    这个"ASP后台管理示例大综合"压缩包显然提供了多种ASP编程的实例,帮助开发者了解和学习如何构建后台管理系统。后台管理系统通常用于网站的内部管理,包括用户管理、数据管理、权限控制等功能。 在ASP中,后台管理...

    Django 使用Ajax进行前后台交互的示例讲解

    在本篇教程中,我们将探讨如何在Django框架中使用Ajax技术实现前后台的数据交互。Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下,与服务器交换数据并更新部分网页的技术。在Django中,...

    html+CSS+js+VUE+element+java后台项目示例

    包含html-CSS-javascript-vue-element等多项基础知识课件详解,为web开发提供基础技术。并包含一个web项目的示例代码,利于掌握Java后台和前端的程序设计流程。

    jQuery EasyUI 1.25静态后台 页面示例

    在这个"jQuery EasyUI 1.25静态后台 页面示例"中,我们可以关注以下几个关键知识点: 1. **静态页面**:这里的“静态”指的是网页的内容在服务器端不进行动态生成,而是直接返回预设好的HTML文件。这种结构对于开发...

    ajax跨域请求jsonp前后台代码

    基于ajax方式的跨域请求jsonp的前后台代码

Global site tag (gtag.js) - Google Analytics