培训目的
- 如何进行前后端校验
- 提高开发效率
- 避免重复造轮子
- 统一开发规范
- 保证系统安全
工作成果
- 前端校验demo
- 后端校验demo
- 工具类的封装
使用教程
前端校验
demo演示图
1. 空内容校验
什么也不输入，点击确定 或者 失去焦点都会出现“请输入课程名”的提示
2. 字符长度校验
输入字符过多，点击确定 或者 失去焦点都会出现“长度在2到5个字符”的提示
3. 唯一性校验
数据中已经有了语文，如果再添加语文，会提示课程名已存在
前端代码
- 表单代码
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<el-form
ref="courseRules"
:model="course"
:rules="rules"
label-width="150px"
label-position="right"
>
<el-form-item label="课程名(前台校验)" prop="courseName">
<el-input v-model="course.courseName" placeholder="" />
</el-form-item>
<el-form-item label="备注(后台校验)">
<el-input v-model="course.memo" placeholder="" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel('courseRules')">取 消</el-button>
<el-button type="primary" @click="save('courseRules')">确 定</el-button>
</span>
</el-dialog>
- js代码
const courseDefault = {
courseName: '',
memo: '',
student: {
studentName: '张三'
}
}
data() {
// 自定义校验规则
var validCourseName = (rule, value, callback) => {
// console.log(rule,value,callback)
CourseApi.queryByCourseName(value).then(res => {
// res.data表示从后台根据课程名查询到的课程数量,如果有课程数量，表示已经存在
if (res.data.status !== 20001005) {
callback(res.data.message)
} else {
callback()
}
})
}
return {
course: Object.assign({}, courseDefault),
rules: {
courseName: [
{ required: true, message: '请输入课程名称', trigger: 'blur' },
{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' },
{ validator: validCourseName, trigger: 'blur' }
]
}
}
},
methods: {
save(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
CourseApi.save(this.course).then(res => {
this.queryPage(this.queryParam)
this.dialogVisible = false
}).catch(err => {
console.log(err)
this.dialogVisible = false
})
} else {
console.log('error submit!!')
return false
}
})
},
resetForm(formName) { // 重置验证
this.$refs[formName].clearValidate()
},
handleClose(done) { // 关闭表单的时候，重置验证
// this.$confirm('确认关闭？')
// .then(_ => {
// done()
// })
// .catch(_ => {})
this.resetForm('courseRules')
done()
},
}
后台校验
demo演示
- 用备注来演示后台校验，备注文本框中什么也不输入，直接点解确定按钮
备注输入框中什么也不输入，直接点击确定按钮后，页面显示“备注长度在10-15个字符!备注不能为空!”
后台代码
javax.validation.constraints jdk提供的校验包，导包的时候导这个
@PostMapping("/save")
@ApiOperation("保存课程")
public ResultUtil save(@RequestBody @Valid DemoCourseBo demoCourse,
BindingResult result){
if (result.hasErrors()) {
return ValidUtil.getDefaultMsg(result);
}
return demoCourseService.save(demoCourse);
}
import com.sgcc.demo.model.po.Student;
import lombok.Data;
import org.hibernate.validator.constraints.Length;
import javax.validation.Valid;
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.NotNull;
import java.util.List;
@Data
public class DemoCourseBo{
/**学生列表*/
@NotEmpty(message = "集合不能为空！")
private List<@Valid Student> studentList;
/**目录列表*/
@NotEmpty
private List<String> categoryList;
/**
* 主键:
*/
private String id;
/**
* 课程名
*/
@NotBlank(message = "课程名不能为空!")
@Length(min = 2, max = 5, message = "课程名长度在2-5个字符!")
private String courseName;
/**
* 备注
*/
@NotBlank(message = "备注不能为空!")
@Length(min = 10, max = 15, message = "备注长度在10-15个字符!")
private String memo;
}
由于PO类是自动生成的，为防止覆盖，不能进行修改，所以写了Bo类。
BindingResult result 这个对象就是捕捉校验信息的，如果校验生效了，说明请求的参数是不符合校验的，也就是result.hasError()为true，进入if。否则，校验不生效，说明请求的参数符合校验，跳过if，继续走后面。
ValidUtil工具类会将我们预先设定的校验信息拼接起来返回前端。
常用后台校验注解
@NotNull 被注释的元素不能为null
@Pattern(value) 被注释的元素必须符合指定的正则表达式。
@Length 被注释的字符串的大小必须在指定的范围内
@NotEmpty 用在List和数组上 包含了@NotNull
@NotBlank 用在字符串上 包含了@NotNull
可能用到的
@Null 被注释的元素必须为null
@NotNull 被注释的元素不能为null
@AssertTrue 被注释的元素必须为true
@AssertFalse 被注释的元素必须为false
@Min(value) 被注释的元素必须是一个数字，其值必须大于等于指定的最小值
@Max(value) 被注释的元素必须是一个数字，其值必须小于等于指定的最大值
@DecimalMin(value) 被注释的元素必须是一个数字，其值必须大于等于指定的最小值
@DecimalMax(value) 被注释的元素必须是一个数字，其值必须小于等于指定的最大值
@Size(max,min) 被注释的元素的大小必须在指定的范围内。
@Digits(integer,fraction) 被注释的元素必须是一个数字，其值必须在可接受的范围内
@Past 被注释的元素必须是一个过去的日期
@Future 被注释的元素必须是一个将来的日期
@Pattern(value) 被注释的元素必须符合指定的正则表达式。
@Email 被注释的元素必须是电子邮件地址
@Length 被注释的字符串的大小必须在指定的范围内
@NotEmpty
@Range 被注释的元素必须在合适的范围内
@NotBlank
