Spring验证框架:SpringValidation
是一个用于验证指定实体类中的属性值得验证框架,可以规定这个实体类中的属性值得格式(正则),如果不符合规定,可以反馈错误
为什么需要Spring验证框架
我们之前都使用js来验证用户输入的信息,但是前段验证并不是可靠的,无论前端有没有验证,java后台都必须验证信息,保证数据安全
添加依赖 pom.xml文件添加如下依赖
<!-- 验证框架 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-validation</artifactId>
</dependency>转到要验证的实体类添加验证代码,以项目 RegisterVo示例：
@Data
public class RegisterVo implements Serializable {
// @NotBlank针对字符串类型不能为null也不能为""
@NotBlank(message = "邀请码不能为空")
private String inviteCode;
@NotBlank(message = "手机号不能为空")
@Pattern(regexp = "^1\\d{10}$",message = "手机号不正确")
private String phone;
@NotBlank(message = "昵称不能为空")
@Pattern(regexp = "^.{2,20}$",message = "昵称长度是2到20个字符")
private String nickname;
@NotBlank(message = "密码不能为空")
@Pattern(regexp = "^\\w{6,20}$",message = "密码是6到20个字母,数字,_组成")
private String password;
@NotBlank(message = "确认密码不能为空")
private String confirm;
}SpringValidation常用的验证注解
@NotBlank,针对字符串类型,不能是null或""
@NotNull,针对任何引用类型不能是null,但是如果是字符串可以是""
@NotEmpty,一般针对集合,不能为null且长度不能是0
@Pattern,编写正则表达式
要想启动验证,需要在使用实体类的位置添加注解，SystemController类中注册方法代码 示例：
@PostMapping("/register")
public R registerStudent(@Validated RegisterVo registerVo,
BindingResult res){
//@Validated表示要SpringValidation验证 registerVo
//BindingResult res来保存SpringValidation验证的结果
//方法中先来判断res有没有错误
if(res.hasErrors()){
//如果有错误,获得第一个错误信息
String error=res.getFieldError().getDefaultMessage();
return R.unproecsableEntity(error);
}
//判断两次密码输入是否一致
if(!registerVo.getPassword().equals(registerVo.getConfirm())){
return R.unproecsableEntity("两次密码输入不一致");
}
}Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="bower_components/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Vue Demo</h1>
<p v-text="message">这是演示信息</p>
<input type="text" v-model="desc">
<button type="button" v-on:click="hello">演示</button>
</div>
</body>
<script>
let app=new Vue({
el:"#app",
data:{
message:"Hello Vue!!!",
desc:"2021-1-15"
},
methods:{
hello:function(){
console.log(this.desc);
this.message=this.desc;
}
}
})
</script>
</html>Vue的运行可以实现页面数据和vue变量的双向绑定
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/plugins/css/vueAlert.css">
<link rel="stylesheet" href="css/login.css">
<script src="bower_components/jquery/dist/jquery.min.js" ></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js" ></script>
<script src="bower_components/vue/dist/vue.js"></script>
</head>
<body class="bg-light">
<div class="container-fluid">
<div class="row">
<div class="mx-auto mt-5" style="width: 400px">
<div class="bg-white p-4" id="app">
<p class="text-center"><b>注册新用户</b></p>
<div id="error" class="alert alert-danger" style="display: none"
v-bind:class="{'d-block':hasError}">
<i class="fa fa-exclamation-triangle"></i>
<span v-text="message">邀请码错误！</span>
</div>
<form action="/register" method="post" v-on:submit.prevent="register">
<div class="form-group has-icon">
<input type="tel" name="phone" class="form-control" placeholder="请输入手机号"
pattern="^\d{11}$" required="required" v-model="phone">
<span class=" fa fa-phone form-control-icon"></span>
</div>
<div class="form-group has-icon">
<input type="text" name="nickname" class="form-control" placeholder="请设置昵称，字数为2-20之间"
pattern="^.{2,20}$" required="required" v-model="nickname">
<span class="fa fa-user form-control-icon"></span>
</div>
<div class="form-group has-icon">
<input type="password" name="password" class="form-control" placeholder="设置密码6-20个字母、数字、下划线"
required="required" pattern="^\w{6,20}$" v-model="password" >
<span class="fa fa-lock form-control-icon"></span>
</div>
<button type="submit" class="btn btn-primary btn-block btn-flat" >注册</button>
</form>
<a href="login.html" class="text-center d-inline-block mt-3">已有账号，立即登录</a>
</div>
<!-- /.form-box -->
</div>
</div>
</div>
</body>
<script src="js/utils.js"></script>
<script src="js/register.js"></script>
</html>
v-bind主要用于解决HTML元素属性值的绑定问题，用于响应更新HTML元素的属性，将一个或多个属性或一个组件的prop动态绑定到表达式。
v-bind绑定class，绑定方式：对象语法，含义class后面跟的是一个对象
v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。
v-on:submit.prevent指在该表单中的任何提交按钮都可以触发该事件
v-model一般用于双向绑定：
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
<!--引入标签的导航栏-->
<div class="container-fluid" th:fragment="tags_nav" >
<div class="nav font-weight-light" id="tagsApp">
<a href="tag/tag_question.html" class="nav-item nav-link text-info"><small>全部</small></a>
<a href="tag/tag_question.html" class="nav-item nav-link text-info"
v-for="tag in tags">
<small v-text="tag.name">Java基础</small></a>
</div>
</div>
v-for：指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名
let app = new Vue({
el:'#app',
data:{
phone:'',
nickname:'',
password:'',
message: '',
hasError: false
},
methods:{
register:function () {
console.log('Submit');
let data = {
phone: this.phone,
nickname: this.nickname,
password: this.password,
}
console.log(data);
if(data.password !== data.confirm){
this.message = "确认密码不一致！";
this.hasError = true;
return;
}
$.ajax({
url:"/register",
method: "POST",
data: data,
success: function (r) {
console.log(r);
if(r.code == CREATED){
console.log("注册成功");
console.log(r.message);
app.hasError = false;
location.href = '/login.html?register';
}else{
console.log(r.message);
app.hasError = true;
app.message = r.message;
}
}
});
}
}
});