目录
vue+springboot练手demo（一）——环境搭建
vue+springboot练手demo（二）——查询功能的实现
vue+springboot练手demo（三）——删除功能的实现
vue+springboot练手demo（四）——新增和修改功能的实现
vue+springboot练手demo（五）——校验功能
vue+springboot练手demo（六）——Swagger、Druid监控和日志
校验功能
前端使用vue中自带的表单验证功能和正则表达式一起使用；后端使用validation注解配合正则表达式进行校验。后端校验较为简单，因此先从后端校验开始。
后端校验
导入依赖
org.springframework.boot
spring-boot-starter-validation
修改Emps实体类，需要为姓名、邮箱、性别、手机号和出生日期设置简单验证。
@NotNull(message = "姓名不能为空")
@Pattern(regexp = "^[\\u4e00-\\u9fa5]{2,6}$")
private String eName;
@Email
private String eEmail;
@NotNull(message = "性别不能为空")
private String eSex;
@NotNull(message = "手机号不能为空")
@Pattern(regexp = "^1[3-9]\\d{9}$")
private String ePhone;
@NotNull(message = "出生日期不能为空")
private String eDate;
注解说明：
- @NotNull：不能为空
- @Pattern：内嵌正则表达式验证，regexp中为正则表达式
- @Email：电子邮箱规则
修改EmpsController中的添加和修改方法，添加@Valid注解开启验证，使用BindingResult返回异常信息
@PostMapping("Emps")
public Msg AddEmp(@Valid @RequestBody Emps emps, BindingResult bindingResult){
if (bindingResult.hasErrors()){
for (FieldError fieldError : bindingResult.getFieldErrors()) {
System.out.println(fieldError.getField()+":"+fieldError.getDefaultMessage());
}
return Msg.fail();
}else {
return Msg.success();
}
}
@PutMapping("Emps")
public Msg UpdateEmp(@Valid @RequestBody Emps emps, BindingResult bindingResult){
if (bindingResult.hasErrors()){
for (FieldError fieldError : bindingResult.getFieldErrors()) {
System.out.println(fieldError.getField()+":"+fieldError.getDefaultMessage());
}
return Msg.fail();
}else {
empsService.UpdateById(emps);
return Msg.success();
}
}
测试，添加操作和修改操作类似，因此这里只测试了添加操作的。
5-1 添加异常信息.png
5-2 异常信息.png
5-3 添加正确信息.png
5-4 添加成功.png
前端校验
前端校验参考element-ui官网中表单验证的模块。代码如下
#首先在模态框中的标签对中添加:rules，后面代表着是制定校验的规则
:rules="EmpRules"
#第二步在data(){}下中的return{}中实现EmpRules
EmpRules: {
eName: [{required: true, validator: checkName, trigger: 'blur'}],
eEmail: [{required: true, validator: checkEmail, trigger: 'blur'}],
ePhone: [{required: true, validator: checkPhone, trigger: 'blur'}],
eDate: [{required: true, message: '请选择出生日期', trigger: 'change'}],
eSex: [{required: true, message: '请选择性别', trigger: 'change'}],
dId: [{required: true, message: '请选择部门', trigger: 'change'}],
}
#第三步在data(){}下实现checkName、checkEmail和checkPhone，
var checkName = (rule, value, callback) => {
rule = /^[\u4e00-\u9fa5]{2,6}$/;
if (!value) {
callback(new Error('姓名不能为空'));
} else {
if (!rule.test(value)) {
callback(new Error('输入的姓名需为2-6个汉字！'));
} else {
callback();
}
}
};
var checkEmail = (rule, value, callback) => {
rule = /^\w{3,12}@\w{1,5}\.[a-z]{2,3}$/;
if (!value) {
callback(new Error('邮箱不能为空'));
} else {
if (!rule.test(value)) {
callback(new Error('输入的邮箱格式有误！'));
} else {
callback();
}
}
};
var checkPhone = (rule, value, callback) => {
rule = /^1[3-9]\d{9}$/;
if (!value) {
callback(new Error('手机号不能为空'));
} else {
if (!rule.test(value)) {
callback(new Error('输入的手机号格式有误！'));
} else {
callback();
}
}
};
#最后一步，为日期选择器添加校验。首先在标签对最后添加:picker-options="pickerOptions"。随后在方法中实现pickerOptions。
pickerOptions: {
disabledDate(time) {
let _now = Date.now();
return time.getTime() > _now;
}
}
#至此校验的功能就全部实现了，由于校验会出现校验成功和失败的两种情况，因此模态框中的提交按钮的方法就需要修改了。
EmpInfoBtn() {
this.$refs['EmpForm'].validate((valid) => {
if (valid) {
if (!this.editname){
this.$http.post("/Emps/Emps",this.EmpForm).then(result => {
//模态框关闭
this.EmpDialog = false;
//提示信息
if (result.data.code==100){
this.$message({
message: '添加成功！',
type: 'success'
});
}else
{
this.$message({
message: '添加失败！',
type: 'error'
});
}
//重新加载数据
this.findPage(this.endpage);
});
}else {
//由于部门信息可能不会被修改，而原始的部门信息不是id值而是name值，所以这里要做一个判断。当id值不为数字时使其赋值为员工信息中部门信息的id值
if(isNaN(this.EmpForm.dId)){
this.EmpForm.dId=this.EmpForm.deptList[0].dId;
console.log(this.EmpForm.dId)
}
this.$http.put("/Emps/Emps",this.EmpForm).then(result => {
//模态框关闭
this.EmpDialog = false;
//提示信息
if (result.data.code==100){
this.$message({
message: '修改成功！',
type: 'success'
});
}else
{
this.$message({
message: '修改失败！',
type: 'error'
});
}
this.findPage(this.currentpage);
});
}
} else {
return false;
}
});
},
测试
6-1 添加校验.png
6-2 修改校验.png
6-3 日期校验.png
至于校验成功的测试我就不测试了，和前一章的效果一样。至此基本的CRUD就完成了！