使用jquery Vlalidate 和spring 集成Bean Validation 1.1(JSR-349)到SpringMVC 结合实现前后台的验证
前台验证的jquery validate 框架特别成熟了，现在几乎所有的前天验证包括天猫京东都在使用，鉴于互联网对于网络安全的要求，前台验证已经无法保证基本的安全，前后端结合能够防止脚本攻击：
必会的知识点：jquery validate 和 bean vaidate，
目的：对于基本的一个注册页面的form表单实现前后天验证
Bean Validation 1.1当前实现是Hibernate validator 5，对于下面的所有的应用我们都使用spring4，对于pom的依赖最基本的是：
<dependency>
<groupId>javax.el</groupId>
<artifactId>javax.el-api</artifactId>
<version>2.2.4</version>
<scope>provided</scope>
</dependency>
<!-- bean validate -->
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>5.1.1.Final</version>
<dependency>
<groupId>taglibs</groupId>
<artifactId>standard</artifactId>
<version>1.1.2</version>
<type>jar</type>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
<type>jar</type>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.1</version>
<scope>provided</scope>
</dependency>
只是贴了一部分pom文件，其他用到什么自己再去maven仓库找吧。
对应的jsp页面：使用到了一个开源框架jeesite里面的东西，本人觉得这个框架特别好，如果不了解的可以看看。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
<link href="./jquery-validation/1.11.0/jquery.validate.min.css" type="text/css" rel="stylesheet" />
<link href="./jquery-jbox/2.3/Skins/Bootstrap/jbox.min.css" rel="stylesheet" />
<link href="./common/jeesite.css" type="text/css" rel="stylesheet" />
<style type="text/css">
span.error { background:url("./images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200; }
label.error {
background:url("./jquery-validation/1.11.0/images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
label.checked {
background:url("./images/checked.gif") no-repeat 0px 0px;
}
</style>
<script src="./jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="./jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script>
//自己添加的验证及其message
<script src="./jquery-validation/1.11.0/jquery.validate.method.min.js" type="text/javascript"></script>
<script src="./jquery-jbox/2.3/jquery.jBox-2.3.min.js" type="text/javascript"></script>
<script src="./common/jeesite.js" type="text/javascript"></script>
</head>
<body>
<h1>jquery validate 和spring JSR validate实现前后台验证</h1>
<div >
//请求的自己测试的路径
<c:set var="ctxFxyang" value="${pageContext.request.contextPath}${fns:getTestPath()}"/>
<form:form action="${ctxFxyang}/registerSub" type="post" modelAttribute="userModel" id ='registerForm'>
<!--自定义标签，存放统一的错误信息 -->
<sys:message content="${message}"/>
身份证: <form:input path="idCard" type="text" class ="required card"/><br>
<form:errors path="idCard" cssClass="error"></form:errors>
手机号：<form:input path ="mobile" type='text' class ="required mobile"/>
<form:errors path="mobile" cssClass="error"></form:errors>
姓名： <form:input path ="name" type ='text' class ="required name"/><br/>
<form:errors path="name" cssClass="error"></form:errors><br/>
篮球：<form:checkbox path="speciality" value="basketBall"/><br>
足球： <form:checkbox path="speciality" value="footBall"/><br>
<form:errors path="speciality" cssClass="error"></form:errors><br/>
默认省份选择 <form:select path="defaultPrivice">
<option>请选择人员</option>
<form:option value="1">北京</form:option>
<form:option value="2">天津</form:option>
<form:option value="3">上海</form:option>
</form:select><br/>
验证码： <form:input path ="verfitCode" type ='text' class ="required fixed"/><br>
<form:errors path="verfitCode" cssClass="error"></form:errors><br/>
发送验证码： <input type="button"/>
密码： <form:input path ="password" type ='password' class ="required password"/><br>
<form:errors path = "password" cssClass="error"></form:errors>
确认密码： <form:input path ="confimPwd" type ='password' class ="required" equalTo="#password" /><br>
<form:errors path = "confimPwd" cssClass="error"></form:errors>
<!--默认是选中状态 -->
选择协议： <form:checkbox path ="checked" /><br/>
<input type="submit" value="提交" />
</form:form>
<!--统一化错误信息的处理 -->
<form:form commandName="userModel">
<form:errors path="*" cssClass="error"></form:errors><br/>
</form:form>
</div>
<script type='text/javascript'>
$(document).ready(function (){
$('#registerForm').validate({
rules:{}
})
})
</script>
</body>
</html>
<-自定义的标签->
<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ attribute name="content" type="java.lang.String" required="true" description="消息内容"%>
<%@ attribute name="type" type="java.lang.String" description="消息类型：info、success、warning、error、loading"%>
<script type="text/javascript">top.$.jBox.closeTip();</script>
<c:if test="${not empty content}">
<c:if test="${not empty type}">
<c:set var="ctype" value="${type}"/></c:if>
<c:if test="${empty type}"><c:set var="ctype" value="${fn:indexOf(content,'失败') eq -1?'success':'error'}"/></c:if>
<div id="messageBox" class="alert alert-${ctype} hide"><button data-dismiss="alert" class="close">×</button>${content}</div>
<script type="text/javascript">if(!top.$.jBox.tip.mess){top.$.jBox.tip.mess=1;top.$.jBox.tip("${content}","${ctype}",{persistent:true,opacity:0});$("#messageBox").show();}</script>
</c:if>
jquery validate meethod:自己定义的方法及其显示的message
/* * Translated default messages for the jQuery validation plugin. * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語) */ (function ($) { $.extend($.validator.messages, { required: "必填信息", remote: "请修正该信息", email: "请输入正确格式的电子邮件", url: "请输入合法的网址", date: "请输入合法的日期", dateISO: "请输入合法的日期 (ISO).", number: "请输入合法的数字", digits: "只能输入整数", creditcard: "请输入合法的信用卡号", equalTo: "请再次输入相同的值", accept: "请输入拥有合法后缀名的字符串", maxlength: $.validator.format("请输入一个长度最多是 {0} 的字符串"), minlength: $.validator.format("请输入一个长度最少是 {0} 的字符串"), rangelength: $.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"), range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"), max: $.validator.format("请输入一个最大为 {0} 的值"), min: $.validator.format("请输入一个最小为 {0} 的值") }); }(jQuery)); jQuery.validator.addMethod("ip", function(value, element) { return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256)); }, "请输入合法的IP地址"); jQuery.validator.addMethod("abc",function(value, element) { return this.optional(element) || /^[a-zA-Z0-9_]*$/.test(value); },"请输入字母数字或下划线"); jQuery.validator.addMethod("username",function(value, element) { return this.optional(element) || /^[a-zA-Z0-9][a-zA-Z0-9_]{2,19}$/.test(value); },"3-20位字母或数字开头，允许字母数字下划线"); jQuery.validator.addMethod("noEqualTo",function(value, element, param) { return value != $(param).val(); },"请再次输入不同的值"); //真实姓名验证 jQuery.validator.addMethod("realName", function(value, element) { return this.optional(element) || /^[\u4e00-\u9fa5]{2,30}$/.test(value); }, "姓名只能为2-30个汉字"); // 字符验证 jQuery.validator.addMethod("userName", function(value, element) { return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value); }, "登录名只能包括中文字、英文字母、数字和下划线"); // 手机号码验证 jQuery.validator.addMethod("mobile", function(value, element) { var length = value.length; return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value)); }, "请正确填写您的手机号码"); // 电话号码验证 jQuery.validator.addMethod("simplePhone", function(value, element) { var tel = /^(\d{3,4}-?)?\d{7,9}$/g; return this.optional(element) || (tel.test(value)); }, "请正确填写您的电话号码"); // 电话号码验证 jQuery.validator.addMethod("phone", function(value, element) { var tel = /(^0[1-9]{1}\d{9,10}$)|(^1[3,5,8]\d{9}$)/g; return this.optional(element) || (tel.test(value)); }, "格式为:固话为区号(3-4位)号码(7-9位),手机为:13,15,18号段"); // 邮政编码验证 jQuery.validator.addMethod("zipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "请正确填写您的邮政编码"); //QQ号码验证 jQuery.validator.addMethod("qq", function(value, element) { var tel = /^[1-9][0-9]{4,}$/; return this.optional(element) || (tel.test(value)); }, "请正确填写您的QQ号码"); //校验身份证好 jQuery.validator.addMethod("card",function(value, element) { return this.optional(element) || checkIdcard(value); },"请输入正确的身份证号码(15-18位)") //验证身份证函数 function checkIdcard(idcard){ idcard = idcard.toString(); //var Errors=new Array("验证通过!","身份证号码位数不对!","身份证号码出生日期超出范围或含有非法字符!","身份证号码校验错误!","身份证地区非法!"); var Errors=new Array(true,false,false,false,false); var area={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"} var idcard,Y,JYM; var S,M; var idcard_array = new Array(); idcard_array = idcard.split(""); //地区检验 if(area[parseInt(idcard.substr(0,2))]==null) return Errors[4]; //身份号码位数及格式检验 switch(idcard.length){ case 15: if ( (parseInt(idcard.substr(6,2))+1900) % 4 == 0 || ((parseInt(idcard.substr(6,2))+1900) % 100 == 0 && (parseInt(idcard.substr(6,2))+1900) % 4 == 0 )){ ereg=/^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/;//测试出生日期的合法性 } else { ereg=/^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/;//测试出生日期的合法性 } if(ereg.test(idcard)) return Errors[0]; else return Errors[2]; break; case 18: //18 位身份号码检测 //出生日期的合法性检查 //闰年月日:((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9])) //平年月日:((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8])) if ( parseInt(idcard.substr(6,4)) % 4 == 0 || (parseInt(idcard.substr(6,4)) % 100 == 0 && parseInt(idcard.substr(6,4))%4 == 0 )){ ereg=/^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;//闰年出生日期的合法性正则表达式 } else { ereg=/^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;//平年出生日期的合法性正则表达式 } if(ereg.test(idcard)) {//测试出生日期的合法性 //计算校验位 S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7 + (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9 + (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10 + (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5 + (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8 + (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4 + (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2 + parseInt(idcard_array[7]) * 1 + parseInt(idcard_array[8]) * 6 + parseInt(idcard_array[9]) * 3 ; Y = S % 11; M = "F"; JYM = "10X98765432"; M = JYM.substr(Y,1);//判断校验位 if(M == idcard_array[17]) return Errors[0]; //检测ID的校验位 else return Errors[3]; } else return Errors[2]; break; default: return Errors[1]; break; } }
Model对应的pojo:
package com.fxyang.test.Vo; import java.io.Serializable; import java.util.List; import javax.validation.GroupSequence; import javax.validation.constraints.Pattern; import org.hibernate.validator.constraints.NotBlank; import com.fxyang.test.util.anno.IdCardValid; import com.fxyang.test.util.group.First; import com.fxyang.test.util.group.Second; import com.thinkgem.jeesite.common.persistence.DataEntity; //，通过实体验证，指定分组的验证先验证groups为First.class 之后验证标记Second.class @GroupSequence({First.class, Second.class, UserModel.class}) public class UserModel extends DataEntity<UserModel> implements Serializable { private String idCard; private String mobile; private String password; private String confimPwd; private String verfitCode; private String name ; private Boolean checked; private String provice; private String defaultPrivice; public String getDefaultPrivice() { return defaultPrivice; } public void setDefaultPrivice(String defaultPrivice) { this.defaultPrivice = defaultPrivice; } private String speciality; private List<String> speList;//特长 public List<String> getSpeList() { return speList; } public void setSpeList( List<String> speList) { this.speList = speList; } public String getSpeciality() { return speciality; } public void setSpeciality(String speciality) { this.speciality = speciality; } public String getProvice() { return provice; } public void setProvice(String provice) { this.provice = provice; } public Boolean getChecked() { return checked; } public void setChecked(Boolean checked) { this.checked = checked; } @NotBlank(message="身份证不能为空",groups={First.class}) @IdCardValid(message="身份证号码格式错误",groups={First.class}) public String getIdCard() { return idCard; } public void setIdCard(String idCard) { this.idCard = idCard; } @NotBlank(message="电话号码不能为空",groups={First.class}) @Pattern(regexp="^1(3|4|5|7|8)\\d{9}$",message="电话号码格式错误",groups={Second.class}) public String getMobile() { return mobile; } public void setMobile(String mobile) { this.mobile = mobile; } @NotBlank(message="密码不能为空",groups={First.class}) public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } @NotBlank(message="确认密码不能为空",groups={Second.class}) public String getConfimPwd() { return confimPwd; } public void setConfimPwd(String confimPwd) { this.confimPwd = confimPwd; } public String getVerfitCode() { return verfitCode; } public void setVerfitCode(String verfitCode) { this.verfitCode = verfitCode; } public String getName() { return name; } public void setName(String name) { this.name = name; } }
处理器：
package com.fxyang.test.controller; import java.util.ArrayList; import java.util.List; import javax.validation.Valid; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.validation.BindingResult; import org.springframework.validation.annotation.Validated; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.RequestMapping; import com.fxyang.test.Vo.UserModel; import com.fxyang.test.util.group.First; import com.fxyang.test.util.group.Second; import com.thinkgem.jeesite.common.redis.service.RedisService; import com.thinkgem.jeesite.common.utils.JacksonJsonUtil; import com.thinkgem.jeesite.common.web.BaseController; import com.thinkgem.jeesite.modules.sys.entity.Area; /*此controller主要是练习spring from 标签和后台数据验证，后面会将错误的信息提取出来放在resourse下面就可以了可以实现跨语言的操作*/ @Controller @RequestMapping(value ="fxyang") public class UserModelController extends BaseController { @Autowired private RedisService redisService; @Value("${TestPath}") private String testPath; /*绑定数据到前台直接使用*/ @RequestMapping(value="register") public String registerForm(@ModelAttribute(value="userModel") UserModel userModel,Model model ){ userModel.setChecked(true); userModel.setSpeciality("basketBall"); userModel.setDefaultPrivice("1");//默认选中北京 model.addAttribute("userModel",userModel);//这个key将直接覆盖点前面的key因为底层是map return "/modules/fxyang/userModel"; } @RequestMapping(value="registerSubmit") public String registerSubmit(@Valid @ModelAttribute(value ="userModel") UserModel userModel ,BindingResult result,Model model ){ if(result.hasErrors()){ // 提交出现错误时候直接定位到错误页面 return registerForm(userModel,model); } return null; } // 对于分组我们最主要的是对于验证形成梯度的考虑，使用jeesite自带的验证，有时间的话可以看看， @RequestMapping(value="registerSub") public String registerSub(@ModelAttribute(value ="userModel") UserModel userModel ,Model model ){ boolean beanValidator = beanValidator(model, userModel,First.class ,Second.class); if(!beanValidator){ return registerForm(userModel,model); } return null; } // 使用jsr自定义分组验证，自定义验证的分组，如果不同过就会显示， @RequestMapping(value="registerSubGroup") public String registerSubGroup(@Validated({Second.class}) @ModelAttribute(value ="userModel") UserModel userModel ,BindingResult result,Model model ){ if(result.hasErrors()){ // 提交出现错误时候直接定位到错误页面 return registerForm(userModel,model); } return null; } //自定义注解的验证 @RequestMapping(value="registerSubAnn") public String registerSubAnn(@Valid @ModelAttribute(value ="userModel") UserModel userModel ,BindingResult result,Model model ){ if(result.hasErrors()){ // 提交出现错误时候直接定位到错误页面 return registerForm(userModel,model); } return null; } }
这里面对于bean validate 不了解的话可以直接去http://jinnianshilongnian.iteye.com/blog/1990081张开涛老师的博客学习，写的特别好，特别详细，对于jquery validate 不是很熟的直接去菜鸟教程学习，有javascript基础的去做几个例子就明白了 。
自定义的注解及其验证：
package com.fxyang.test.util.anno; import java.lang.annotation.Documented; import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target; import javax.validation.Payload; //实现身份证号码验证的注解 @Target({ElementType.FIELD, ElementType.METHOD, ElementType.PARAMETER, ElementType.ANNOTATION_TYPE }) @Retention(RetentionPolicy.RUNTIME) @Documented public @interface IdCardValid { String message() default "身份证号格式错误"; //分组 Class<?>[] groups() default { }; //负载 Class<? extends Payload>[] payload() default { }; //指定多个时使用 @Target({ElementType.FIELD, ElementType.METHOD, ElementType.PARAMETER, ElementType.ANNOTATION_TYPE }) @Retention(RetentionPolicy.RUNTIME) @Documented @interface List { IdCardValid[] value(); } }
身份证验证
package com.fxyang.test.util; import javax.validation.ConstraintValidator; import javax.validation.ConstraintValidatorContext; import org.apache.commons.lang3.StringUtils; import com.fxyang.test.util.anno.IdCardValid; import com.thinkgem.jeesite.common.utils.IdcardUtils; public class IdCardValidator implements ConstraintValidator<IdCardValid, String> { @Override public void initialize(IdCardValid constraintAnnotation) { } //使用IdCardUtils直接验证 @Override public boolean isValid(String value, ConstraintValidatorContext context) { Boolean flag =true; if(StringUtils.isBlank(value)){ return flag; } if(!IdcardUtils.validateCard(value)){ flag = false; return flag; } return flag; } }
//分组标志
public interface First {
}
public interface Second {
}
//配置文件
<!-- validate验证的 -->
<mvc:annotation-driven validator="validator"/>
<!-- 以下 validator ConversionService 在使用 mvc:annotation-driven 会 自动注册-->
<bean id="validator" class="org.springframework.validation.beanvalidation.LocalValidatorFactoryBean">
<property name="providerClass" value="org.hibernate.validator.HibernateValidator"/>
<!-- 如果不加默认到 使用classpath下的 ValidationMessages.properties -->
<property name="validationMessageSource" ref="messageSource"/>
</bean>
<!-- 国际化的消息资源文件（本系统中主要用于显示/错误消息定制） -->
<bean id="messageSource" class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
<property name="basenames">
<list>
<!-- 在web环境中一定要定位到classpath 否则默认到当前web应用下找 -->
<value>classpath:errorMessages/userErrorMessage</value>
<value>classpath:org/hibernate/validator/ValidationMessages</value>
</list>
</property>
<property name="useCodeAsDefaultMessage" value="false"/>
<property name="defaultEncoding" value="UTF-8"/>
<property name="cacheSeconds" value="60"/>
</bean>
<!-- validate验证结束 -->
到此结束：
