前端Vue+后端javaJSR303校验

前端：
这里使用得是VUE进行前端验证

  //
  <el-form-item label="检索首字母" prop="firstLetter">
        <el-input
          v-model="dataForm.firstLetter"
          placeholder="检索首字母"
        ></el-input>
      </el-form-item>

    <el-form-item label="排序" prop="sort">
        <el-input v-model.number="dataForm.sort" placeholder="排序"></el-input>
      </el-form-item>

使用prop绑定一个方法，进行验证，方法写在data中就可以

data() {
    return {
      visible: false,
      dataForm: {
        brandId: 0,
        name: "",
        logo: "",
        descript: "",
        showStatus: 1 ,
        firstLetter: "",
        sort: 0,
      },
      dataRule: {
        name: [{ required: true, message: "品牌名不能为空", trigger: "blur" }],
        logo: [
          { required: true, message: "品牌logo地址不能为空", trigger: "blur" },
        ],
        descript: [
          { required: true, message: "介绍不能为空", trigger: "blur" },
        ],
        showStatus: [
          {
            required: true,
            message: "显示状态[0-不显示；1-显示]不能为空",
            trigger: "blur",
          },
        ],
        firstLetter: [
          {
            validator: (rule, value, callback) => {
              if (value == "") {
                callback(new Error("首字母必须填写"));
              } 
              else if (!/^[a-zA-Z]$/.test(value) ) {
                callback(new Error("排序必须是字母开始"));
              } else {
                callback();
              }
            },
             trigger: "blur"
          }
        ],
        sort: [  
          {
            validator: (rule, value, callback) => {
              if (value == "") {
                callback(new Error("排序字段必须填写"));
              } else if (!Number.isInteger(value) ||value<0) {
                callback(new Error("排序必须大于等于0"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],

后端
后端直接使用java提供得JSR303校验

	@NotBlank(message = "品牌名必须提交")
	private String name;
	@NotEmpty
	@URL(message = "logo必须是一个合法的URL地址")
pattern 是正则校验
	@NotEmpty	
	@Pattern(regexp = "/^[a-zA-Z]$/",message = "检索首字母必须是一个字幕")
	private String firstLetter;

注解编写完之后，如果开启注解，需要在使用到得方法中编写@Vaild注解

//    BindingResult  必须在实体类之后，这是规定，可以直接获取到实体类返回的错误信息
 @RequestMapping("/save")
    public R save(@Valid @RequestBody BrandEntity brand, BindingResult result){
        Map<String,String> map = new HashMap<>();
//        如果进入这个，表示有错误信息
        if (result.hasErrors()) {
//            获取错误的校验结果
            result.getFieldErrors().forEach((item)->{
//                获取到错误提示信息
                String defaultMessage = item.getDefaultMessage();
//                获取到错误的属性名字
                String field = item.getField();
                map.put(field,defaultMessage);
            });
          return   R.error(400,"提交的数据不合法").put("data",map);

        }
		brandService.save(brand);

        return R.ok();
    }**