vue+springboot練手demo（一）——環(huán)境搭建
 vue+springboot練手demo（二）——查詢功能的實現(xiàn)
vue+springboot練手demo（三）——刪除功能的實現(xiàn)
vue+springboot練手demo（四）——新增和修改功能的實現(xiàn)
vue+springboot練手demo（五）——校驗功能
 vue+springboot練手demo（六）——Swagger掺涛、Druid監(jiān)控和日志

校驗功能

前端使用vue中自帶的表單驗證功能和正則表達式一起使用跷究；后端使用validation注解配合正則表達式進行校驗胎撤。后端校驗較為簡單默穴，因此先從后端校驗開始挖炬。

后端校驗

導(dǎo)入依賴

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

修改Emps實體類支鸡，需要為姓名镰官、郵箱、性別碌尔、手機號和出生日期設(shè)置簡單驗證浇辜。

    @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：內(nèi)嵌正則表達式驗證，regexp中為正則表達式
@Email：電子郵箱規(guī)則
修改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官網(wǎng)中表單驗證的模塊卑雁。代碼如下

#首先在模態(tài)框中的<el-form>標簽對中添加:rules募书，后面代表著是制定校驗的規(guī)則
:rules="EmpRules"
#第二步在data(){}下中的return{}中實現(xiàn)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(){}下實現(xiàn)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"琉挖。隨后在方法中實現(xiàn)pickerOptions启泣。
pickerOptions: {
  disabledDate(time) {
    let _now = Date.now();
    return time.getTime() > _now;
  }
}
#至此校驗的功能就全部實現(xiàn)了，由于校驗會出現(xiàn)校驗成功和失敗的兩種情況示辈，因此模態(tài)框中的提交按鈕的方法就需要修改了寥茫。
      EmpInfoBtn() {
        this.$refs['EmpForm'].validate((valid) => {
          if (valid) {
            if (!this.editname){
              this.$http.post("/Emps/Emps",this.EmpForm).then(result => {
                //模態(tài)框關(guān)閉
                this.EmpDialog = false;
                //提示信息
                if (result.data.code==100){
                  this.$message({
                    message: '添加成功！',
                    type: 'success'
                  });
                }else
                {
                  this.$message({
                    message: '添加失敺椤纱耻！',
                    type: 'error'
                  });
                }
                //重新加載數(shù)據(jù)
                this.findPage(this.endpage);
              });
            }else {
              //由于部門信息可能不會被修改芭梯，而原始的部門信息不是id值而是name值，所以這里要做一個判斷弄喘。當id值不為數(shù)字時使其賦值為員工信息中部門信息的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 => {
                //模態(tài)框關(guān)閉
                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（五）——校驗功能

目錄

校驗功能

后端校驗

前端校驗

測試