• springboot+vue+element-ui实现前后端的全部校验

    1、前端校验

    el-form的表单校验

    1. <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    2.   <el-form-item label="密码" prop="pass">
    3.     <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
    4.   </el-form-item>
    5.   <el-form-item label="确认密码" prop="checkPass">
    6.     <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
    7.   </el-form-item>
    8.   <el-form-item label="年龄" prop="age">
    9.     <el-input v-model.number="ruleForm.age"></el-input>
    10.   </el-form-item>
    11.   <el-form-item>
    12.     <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    13.     <el-button @click="resetForm('ruleForm')">重置</el-button>
    14.   </el-form-item>
    15. </el-form>
    16. <script>
    17.   export default {
    18.     data() {
    19.       var checkAge = (rule, value, callback) => {
    20.         if (!value) {
    21.           return callback(new Error('年龄不能为空'));
    22.         }
    23.         setTimeout(() => {
    24.           if (!Number.isInteger(value)) {
    25.             callback(new Error('请输入数字值'));
    26.           } else {
    27.             if (value < 18) {
    28.               callback(new Error('必须年满18岁'));
    29.             } else {
    30.               callback();
    31.             }
    32.           }
    33.         }, 1000);
    34.       };
    35.       var validatePass = (rule, value, callback) => {
    36.         if (value === '') {
    37.           callback(new Error('请输入密码'));
    38.         } else {
    39.           if (this.ruleForm.checkPass !== '') {
    40.             this.$refs.ruleForm.validateField('checkPass');
    41.           }
    42.           callback();
    43.         }
    44.       };
    45.       var validatePass2 = (rule, value, callback) => {
    46.         if (value === '') {
    47.           callback(new Error('请再次输入密码'));
    48.         } else if (value !== this.ruleForm.pass) {
    49.           callback(new Error('两次输入密码不一致!'));
    50.         } else {
    51.           callback();
    52.         }
    53.       };
    54.       return {
    55.         ruleForm: {
    56.           pass: '',
    57.           checkPass: '',
    58.           age: ''
    59.         },
    60.         rules: {
    61.           pass: [
    62.             { validator: validatePass, trigger: 'blur' }
    63.           ],
    64.           checkPass: [
    65.             { validator: validatePass2, trigger: 'blur' }
    66.           ],
    67.           age: [
    68.             { validator: checkAge, trigger: 'blur' }
    69.           ]
    70.         }
    71.       };
    72.     },
    73.     methods: {
    74.       
    75.     }
    76.   }
    77. </script>

    自定义校验器

    1. <el-form
    2.       :model="dataForm"
    3.       :rules="dataRule"
    4.       ref="dataForm"
    5.       @keyup.enter.native="dataFormSubmit()"
    6.       label-width="140px"
    7.     >
    8. </el-form>
    9. data() {
    10.       return {
    11.         visible: false,
    12.         dataForm: {
    13.           brandId: 0,
    14.           name: "",
    15.           logo: "",
    16.           descript: "",
    17.           showStatus: "",
    18.           firstLetter: "",
    19.           sort: "",
    20.         },
    21.         dataRule: {
    22.           name: [{required: true, message: "品牌名不能为空", trigger: "blur"}],
    23.           logo: [
    24.             {required: true, message: "品牌logo地址不能为空", trigger: "blur"},
    25.           ],
    26.           descript: [
    27.             {required: true, message: "介绍不能为空", trigger: "blur"},
    28.           ],
    29.           showStatus: [
    30.             {
    31.               required: true,
    32.               message: "显示状态[0-不显示；1-显示]不能为空",
    33.               trigger: "blur",
    34.             },
    35.           ],
    36.           firstLetter: [
    37.             {
    38.               validator: (rule, value, callback) => {
    39.                 if (value == "") {
    40.                   callback(new Error("请输入首字母"));
    41.                 } else if (!(/^[a-zA-Z]$/).test(value)) {
    42.                   callback(new Error("请输入英文字母"));
    43.                 } else {
    44.                   callback();
    45.                 }
    46.  
    47.               }, trigger: "blur"
    48.             },
    49.           ],
    50.           sort: [{
    51.             validator: (rule, value, callback) => {
    52.               if (value == '') {
    53.                 callback(new Error("请输入排序字段"));
    54.               } else if (!Number.isInteger(value) || value < 0) {
    55.                 callback(new Error('排序字段必须是一个整数并且大于0'))
    56.               } else {
    57.                 callback();
    58.               }
    59.             }, trigger: "blur"
    60.           }],
    61.         },
    62.       };
    63.     },

     

    2、JSR303后端校验

    后端的校验注解：

    代码：

    1. package com.atguigu.gulimall.product.entity;
    2.  
    3. import com.atguigu.common.valid.AddGroup;
    4. import com.atguigu.common.valid.ListValue;
    5. import com.atguigu.common.valid.UpdateGroup;
    6. import com.baomidou.mybatisplus.annotation.TableId;
    7. import com.baomidou.mybatisplus.annotation.TableName;
    8.  
    9. import java.io.Serializable;
    10. import java.util.Date;
    11.  
    12. //import com.sun.istack.internal.NotNull;
    13. import lombok.Data;
    14. import org.hibernate.validator.constraints.URL;
    15.  
    16. import javax.validation.constraints.*;
    17.  
    18. /**
    19.  * 品牌
    20.  * 
    21.  * @author pansd
    22.  * @email 1152777670@qq.com
    23.  * @date 2022-02-23 16:02:02
    24.  */
    25. @Data
    26. @TableName("pms_brand")
    27. public class PmsBrandEntity implements Serializable {
    28. 	private static final long serialVersionUID = 1L;
    29.  
    30. 	/**
    31. 	 * 品牌id
    32. 	 */
    33. 	@TableId
    34. 	@Null(message = "新增时不能填写品牌id",groups = {AddGroup.class}) //实现分组检验；
    35. 	@NotNull(message = "修改时必须填写品牌id",groups = {UpdateGroup.class})
    36. 	private Long brandId;
    37. 	/**
    38. 	 * 品牌名
    39. 	 */
    40. 	@NotBlank(message = "品牌名不能为空",groups = {AddGroup.class,UpdateGroup.class}) //不能是一个空格，至少是一个非空字符；如果仅仅在此处标准，默认是不起作用的。得在controller@Valid//响应状态码为400，是校验不通过的。
    41. 	private String name;
    42. 	/**
    43. 	 * 品牌logo地址
    44. 	 */
    45. 	@URL  //如果没有增加分组的校验，那么它的注解是不起作用的。@Validated({AddGroup.class})
    46. 	private String logo;
    47. 	/**
    48. 	 * 介绍
    49. 	 */
    50. 	private String descript;
    51. 	/**
    52. 	 * 显示状态[0-不显示；1-显示]
    53. 	 */
    54. 	@ListValue(vals = {0,1})
    55. 	private Integer showStatus;
    56. 	/**
    57. 	 * 检索首字母
    58. 	 */
    59. 	@Pattern(regexp = "^[a-zA-Z]$",message = "检索首字母必须是一个字母")
    60. 	private String firstLetter;
    61. 	/**
    62. 	 * 排序
    63. 	 */
    64. 	@Min(value = 0)
    65. 	@NotNull //sort字段是一个Integer字段，不能使用notEmpty来标注
    66. 	private Integer sort;
    67.  
    68. }

     注意：此时在实体类中增加的校验是不起作用的。需要在controller中配置@Valid才能使用

    代码如下：

    1. @RequestMapping("/save2")
    2.     public R save2(@Valid @RequestBody PmsBrandEntity brandEntity){
    3.         pmsBrandService.save(brandEntity);
    4.         return R.ok();
    5.     }

     此时，返回的错误信息较为杂乱，为了方便处理，需要返回统一的异常处理。

    3、校验的统一异常处理

    针对于某个接口进行特定的处理方式：

    1.     @RequestMapping("/save")
    2.     public R save(@Valid @RequestBody PmsBrandEntity pmsBrand, BindingResult bindingResult){  //获取校验结果的信息，从而对错误信息进行封装
    3.         //在json后边，紧跟着一个校验的结果。BindingResult bindingResult，拿到校验的结果，就可以封装。
    4.         boolean b = bindingResult.hasErrors(); //是否有错误
    5.         if(b){
    6.             Map<String,Object> map = new HashMap<>();
    7.             //获取校验数据的结果
    8.             bindingResult.getFieldErrors().forEach((item)->{
    9.                 //获取校验字段的名字
    10.                 String field = item.getField();
    11.                 //获取校验信息
    12.                 String defaultMessage = item.getDefaultMessage();
    13.                 map.put(field,defaultMessage);
    14.             });
    15.             return R.error(400,"提交的数据不合法!").put("data",map);
    16.         }
    17.         pmsBrandService.save(pmsBrand);
    18.         return R.ok();
    19.     }

    全局进行处理，代码如下：

    1.   @RequestMapping("/save2")
    2.     public R save2(@Valid @RequestBody PmsBrandEntity brandEntity){
    3.         pmsBrandService.save(brandEntity);
    4.         return R.ok();
    5.     }
    6.  
    7. package com.atguigu.gulimall.product.exception;
    8.  
    9. import com.atguigu.common.exception.BizCodeEnum;
    10. import com.atguigu.common.utils.R;
    11. import lombok.extern.slf4j.Slf4j;
    12. import org.springframework.validation.BindingResult;
    13. import org.springframework.web.bind.MethodArgumentNotValidException;
    14. import org.springframework.web.bind.annotation.ControllerAdvice;
    15. import org.springframework.web.bind.annotation.ExceptionHandler;
    16. import org.springframework.web.bind.annotation.ResponseBody;
    17. import org.springframework.web.bind.annotation.RestControllerAdvice;
    18.  
    19. import java.util.HashMap;
    20. import java.util.Map;
    21.  
    22. /**
    23.  * @author pshdhx
    24.  * @date 2022-03-04 11:12
    25.  * @Des 统一标准来处理异常的
    26.  */
    27. @Slf4j
    28. //@ControllerAdvice
    29. //@ResponseBody
    30. @RestControllerAdvice(basePackages = "com.atguigu.gulimall.product.controller")
    31. public class PshdhxGuliControllerAdvice {
    32.  
    33.     @ExceptionHandler(value = MethodArgumentNotValidException.class)
    34.     public R handleValidException(MethodArgumentNotValidException e){
    35.         BindingResult bindingResult = e.getBindingResult();
    36.         Map<String,Object> map = new HashMap<>();
    37.         bindingResult.getFieldErrors().forEach(item->{
    38.             //...
    39.  
    40.             //获取校验字段的名字
    41.             String field = item.getField();
    42.             //获取校验信息
    43.             String defaultMessage = item.getDefaultMessage();
    44.             map.put(field,defaultMessage);
    45.         });
    46.         log.error("数据校验出现问题{},异常类型{}",e.getMessage(),e.getClass());
    47.         return R.error(BizCodeEnum.VAILD_EXCEPTION.getCode(),BizCodeEnum.VAILD_EXCEPTION.getMsg()).put("data",map);
    48.         //return R.error(BizCodeEnum.VAILD_EXCEPTION.getCode(),BizCodeEnum.VAILD_EXCEPTION.getMsg()).put("data",map);
    49.  
    50.     }
    51.     
    52.     @ExceptionHandler(value = Throwable.class)
    53.     public R handleException(Throwable throwable){
    54.         log.error("错误:",throwable);
    55.         return R.error(BizCodeEnum.UNKNOW_EXCEPTION.getCode(),BizCodeEnum.UNKNOW_EXCEPTION.getMsg());
    56.     }
    57. }

    为了统一自定义异常编码，指定了枚举类型。

    1. package com.atguigu.common.exception;
    2.  
    3. /**
    4.  * @author pshdhx
    5.  * @date 2022-03-04 11:25
    6.  */
    7. public enum  BizCodeEnum {
    8.     UNKNOW_EXCEPTION(10000,"系统未知异常"),
    9.     VAILD_EXCEPTION(10001,"参数格式校验失败");
    10.  
    11.     private int code;
    12.     private String msg;
    13.     BizCodeEnum(int code,String msg){
    14.         this.code = code;
    15.         this.msg = msg;
    16.     }
    17.  
    18.     public int getCode() {
    19.         return code;
    20.     }
    21.  
    22.     public String getMsg() {
    23.         return msg;
    24.     }
    25. }

     

    结果如下： 

     

    4、JSR303后端分组检验

    比如说id这个字段，在新增时，不需要它；在修改时，必须要它，那么就需要对其进行分组处理

    1. @Data
    2. @TableName("pms_brand")
    3. public class PmsBrandEntity implements Serializable {
    4. 	private static final long serialVersionUID = 1L;
    5.  
    6. 	/**
    7. 	 * 品牌id
    8. 	 */
    9. 	@TableId
    10. 	@Null(message = "新增时不能填写品牌id",groups = {AddGroup.class}) //实现分组检验；
    11. 	@NotNull(message = "修改时必须填写品牌id",groups = {UpdateGroup.class})
    12. 	private Long brandId;
    1. package com.atguigu.common.valid;
    2.  
    3. public interface AddGroup {
    4. }

     

    1. package com.atguigu.common.valid;
    2.  
    3. public interface UpdateGroup {
    4. }

    定义俩空接口即可。但是，要想使其生效，则必须在控制器中使用注解@Validated

    1.     //实现分组校验，这是添加是要校验的内容
    2.     @RequestMapping("/save4")
    3.     public R save4(@Validated({AddGroup.class}) @RequestBody PmsBrandEntity brandEntity){
    4.         pmsBrandService.save(brandEntity);
    5.         return R.ok();
    6.     }

     但是，如果其他字段没有增加上相关的分组，则字段上的注释会失效。

    5、JSR303自定义校验规则

    我想让某个字段只输入0和1,需要自定义注解

    1. 	@ListValue(vals = {0,1})
    2. 	private Integer showStatus;

    1、自定义校验规则 

    1. package com.atguigu.common.valid;
    2. /*
    3. 自定义校验规则
    4.  */
    5. import javax.validation.Constraint;
    6. import javax.validation.Payload;
    7. import java.lang.annotation.Documented;
    8. import java.lang.annotation.Retention;
    9. import java.lang.annotation.Target;
    10.  
    11. import static java.lang.annotation.ElementType.*;
    12. import static java.lang.annotation.ElementType.TYPE_USE;
    13. import static java.lang.annotation.RetentionPolicy.RUNTIME;
    14.  
    15. @Documented
    16. @Constraint(validatedBy = { ListValueConstraintValidator.class }) //关联
    17. @Target({ METHOD, FIELD, ANNOTATION_TYPE, CONSTRUCTOR, PARAMETER, TYPE_USE })
    18. @Retention(RUNTIME)
    19. public @interface ListValue {
    20.     String message() default "{com.atguigu.common.valid.ListValue.message}";
    21.  
    22.     Class<?>[] groups() default { };
    23.  
    24.     Class<? extends Payload>[] payload() default { };
    25.  
    26.     int[] vals() default { };
    27. }

    2、自定义校验器

    1. package com.atguigu.common.valid;
    2. /**
    3.  * 自定义校验器
    4.  */
    5.  
    6. import javax.validation.ConstraintValidator;
    7. import javax.validation.ConstraintValidatorContext;
    8. import java.util.HashSet;
    9. import java.util.Set;
    10.  
    11. public class ListValueConstraintValidator implements ConstraintValidator<ListValue,Integer> {
    12.  
    13.     private Set<Integer> set = new HashSet<>();
    14.     //初始化方法
    15.     @Override
    16.     public void initialize(ListValue constraintAnnotation) {
    17.  
    18.         int[] vals = constraintAnnotation.vals();
    19.         for (int val : vals) {
    20.             set.add(val);
    21.         }
    22.  
    23.     }
    24.  
    25.     //判断是否校验成功
    26.  
    27.     /**
    28.      *
    29.      * @param value 需要校验的值
    30.      * @param context
    31.      * @return
    32.      */
    33.     @Override
    34.     public boolean isValid(Integer value, ConstraintValidatorContext context) {
    35.  
    36.         return set.contains(value);
    37.     }
    38. }

    3、关联校验规则和校验器

    1. @Documented
    2. @Constraint(validatedBy = { ListValueConstraintValidator.class }) //关联
    3. @Target({ METHOD, FIELD, ANNOTATION_TYPE, CONSTRUCTOR, PARAMETER, TYPE_USE })
    4. @Retention(RUNTIME)
    5. public @interface ListValue {

    4、校验信息定义

    ValidationMessages.properties

    com.atguigu.common.valid.ListValue.message=必须提交指定的值
  • 相关阅读:
    【HarmonyOS】鸿蒙开发之Stage模型-应用配置文件——第4.2章
    debugger调试监听webpack配置文件的代码
    安达发|印刷包装行业利用APS自动排产系统迎来绿色革命
    系列二、Shiro的核心组件
    ‘std::thread‘ has not been declared
    藏在 Java 数组的背后，你可能忽略的知识点
    【软件工程】【23.04】p1
    【云原生之K8s】 K8s之持久化存储PV、PVC
    分库分表实践
    基于kubenetes的kubespere安装
  • 原文地址：https://blog.csdn.net/pshdhx/article/details/125511077