关于el-form表单验证中的validator与validate使用时的问题

 更新时间:2023年06月21日 09:05:20   作者:lerojon  
这篇文章主要介绍了关于el-form表单验证中的validator与validate使用时的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

el-form表单验证中的validator与validate使用问题

当在使ElementUI el-form组件用自定义表单验证规则的时候,必须保证自定义校验规则的每一层都调用了callback方法,否则会导致el-form组件的validate方法无法进入回调函数。

//这样写才能进入validate回调
certfNo: [
          { required: true, message: "证件号码不能为空", trigger: "blur" },
          {
            trigger: "blur",
            validator: function(rule, value, callback) {
              if (!validIdCard(value)) {
                return callback(new Error("请输入正确的证件号码"));
              }
               //外面一层也要调用回调
              return callback();
            }
          }
        ]
//如果是这样写的话是无法validate回调的
certfNo: [
          { required: true, message: "证件号码不能为空", trigger: "blur" },
          {
            trigger: "blur",
            validator: function(rule, value, callback) {
              if (!validIdCard(value)) {
               callback(new Error("请输入正确的证件号码"));
              }
            }
          }
        ]

记Validator.validate造成的重大问题

问题场景 

类A继承类B,类A,B有相同的字段,并且都用了@NotBlank注解。

在参数都设置正确的情况下,使用Validator.validate校验类A参数是否符合规则时,报错参数不符合规则

代码如下

//实体类
@Data
public class A extends B {
    @NotBlank
    private String name;
    private String score;
    @Valid
    private C c;
}
@Data
public class B {
    @NotBlank
    private String name;
    private String score;
}
@Data
public class C {
    @NotBlank
    private String age;
    private String sex;
}
//设置值
public .... pottBean(){
     A a=new A();
     a.setName("小明");
    check(a);
}
//校验方法
public .....check(Object obj){
    Validator validator =  Validation.buildDefaultValidatorFactory().getValidator();
Set<ConstraintViolation<Object>> constraintViolations = validator.validate(obj);
  //这个地方校验出来的,就是不符合规则的参数名,发现name也在其中,我也设置了值 ,百思不解
}

后来查找多方资料得知,Validator的验证组概念。

Bean Validation 规范中一个重要的概念,就是组和组序列。组定义了约束的子集。

对于一个给定的 Object Graph 结构,有了组的概念,则无需对该 ObjectGraph 中所有的约束进行验证,只需要对该组定义的一个子集进行验证即可。

完成组别验证需要在约束声明时进行组别的声明,否则使用默认的组 Default.class。组也有继承的属性。

对某一组别进行约束验证的时候,也会对其所继承的基类进行验证。所以当我校验A参数时候,会对基类B进行校验

苦逼的我又一次栽在这个地方了,当需要校验实体类中的包含的对象时候,需要在该对象上添加@Valid注解 , 长点心吧~

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue项目中使用scss的方法步骤

    vue项目中使用scss的方法步骤

    这篇文章主要介绍了vue项目中使用scss的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • 解决$store.getters调用不执行的问题

    解决$store.getters调用不执行的问题

    今天小编就为大家分享一篇解决$store.getters调用不执行的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue版数字翻牌器的封装

    vue版数字翻牌器的封装

    这篇文章主要为大家详细介绍了vue版数字翻牌器的封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue3中vue-router的使用方法详解

    Vue3中vue-router的使用方法详解

    Vue Router 是 Vue 的官方路由,它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举,本文将通过简单的示例为大家介绍一下vue-router的使用,需要的可以参考一下
    2023-06-06
  • Vue 请求传公共参数的操作

    Vue 请求传公共参数的操作

    这篇文章主要介绍了Vue 请求传公共参数的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue解决移动端弹窗滚动穿透问题

    Vue解决移动端弹窗滚动穿透问题

    这篇文章主要介绍了Vue解决移动端弹窗滚动穿透问题的方法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • 如何测量vue应用运行时的性能

    如何测量vue应用运行时的性能

    这篇文章主要介绍了如何测量vue应用运行时的性能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06
  • vue组件详解之使用slot分发内容

    vue组件详解之使用slot分发内容

    这篇文章主要介绍了vue组件详解之使用slot分发内容及Vue组件中slot的用法,需要的朋友可以参考下
    2018-04-04
  • element基于el-form智能的FormSmart表单组件

    element基于el-form智能的FormSmart表单组件

    本文主要介绍了element基于el-form智能的FormSmart表单组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • Vue结合openlayers按照经纬度坐标实现锚地标记及绘制多边形区域

    Vue结合openlayers按照经纬度坐标实现锚地标记及绘制多边形区域

    OpenLayers是一个用于开发WebGIS客户端的JavaScript包,最初基于BSD许可发行。OpenLayers是一个开源的项目,其设计之意是为互联网客户端提供强大的地图展示功能,包括地图数据显示与相关操作,并具有灵活的扩展机制
    2022-09-09

最新评论