关于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单页面应用中动态修改title问题

    解决vue单页面应用中动态修改title问题

    这篇文章主要介绍了解决vue单页面应用中动态修改title问题,本文通过示例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • Vue.js项目前端多语言方案的思路与实践

    Vue.js项目前端多语言方案的思路与实践

    前端的国际化是一个比较常见的需求,但网上关于这一方面的直接可用的方案却不多,这篇文章主要给大家介绍了关于Vue.js项目前端多语言方案的思路与实践,需要的朋友可以参考下
    2021-07-07
  • 一文详解Vue选项式 API 的生命周期选项和组合式API

    一文详解Vue选项式 API 的生命周期选项和组合式API

    这篇文章主要为大家介绍了Vue选项式 API 的生命周期选项和组合式API变化详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • vue3之声明式和编程式导航详解

    vue3之声明式和编程式导航详解

    这篇文章主要介绍了vue3之声明式和编程式导航,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • 详解Vue中子组件修改父组件传过来的值的三种方式

    详解Vue中子组件修改父组件传过来的值的三种方式

    这篇文章主要为大家详细介绍了Vue中子组件修改父组件传过来的值的三种方式,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下
    2024-12-12
  • vue移动端使用canvas签名的实现

    vue移动端使用canvas签名的实现

    这篇文章主要介绍了vue移动端使用canvas签名的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • vue如何实现垂直居中

    vue如何实现垂直居中

    这篇文章主要介绍了vue如何实现垂直居中,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 详解如何在Vue项目中实现累加动画

    详解如何在Vue项目中实现累加动画

    这篇文章主要为大家详细介绍了如何在你的Vue项目中实现累加动画,文中的示例代码简洁易懂,具有一定的参考价值,感兴趣的小伙伴可以了解一下
    2023-06-06
  • Vue动态引用json数据的两种方式

    Vue动态引用json数据的两种方式

    在 Vue 项目中引用 JSON 文件非常简单,尤其是当文件内容是一个数组时,本文给大家介绍了Vue动态引用json数据的两种方式,并有相关的代码示例供大家参考,需要的朋友可以参考下
    2025-04-04
  • Vue组件生命周期三个阶段全面总结讲解

    Vue组件生命周期三个阶段全面总结讲解

    Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期
    2022-11-11

最新评论