vue+springboot练手demo（一）——环境搭建
 vue+springboot练手demo（二）——查询功能的实现
 vue+springboot练手demo（三）——删除功能的实现
 vue+springboot练手demo（四）——新增和修改功能的实现
 vue+springboot练手demo（五）——校验功能
 vue+springboot练手demo（六）——Swagger、Druid监控和日志

校验功能

前端使用vue中自带的表单验证功能和正则表达式一起使用；后端使用validation注解配合正则表达式进行校验。后端校验较为简单，因此先从后端校验开始。

后端校验

导入依赖

  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-validation</artifactId>
  </dependency>

修改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官网中表单验证的模块。代码如下

#首先在模态框中的<el-form>标签对中添加: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();
          }
        }
      };
#最后一步，为日期选择器添加校验。首先在<el-date-picker>标签对最后添加: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就完成了！

vue+springboot练手demo（五）——校验功能

目录

校验功能

后端校验

前端校验

测试