关于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中关于element的el-image 图片预览功能增加一个下载按钮(操作方法)

    vue中关于element的el-image 图片预览功能增加一个下载按钮(操作方法)

    这篇文章主要介绍了vue中关于element的el-image 图片预览功能增加一个下载按钮,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue访问未定义的路由时重定向404问题

    vue访问未定义的路由时重定向404问题

    这篇文章主要介绍了vue访问未定义的路由时重定向404问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue时间选择控件的使用方式

    vue时间选择控件的使用方式

    这篇文章主要介绍了vue时间选择控件的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue中post请求报400的解决方案

    vue中post请求报400的解决方案

    这篇文章主要介绍了vue中post请求报400的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue与vue-i18n结合实现后台数据的多语言切换方法

    vue与vue-i18n结合实现后台数据的多语言切换方法

    下面小编就为大家分享一篇vue与vue-i18n结合实现后台数据的多语言切换方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue3中遇到reactive响应式失效的问题记录

    vue3中遇到reactive响应式失效的问题记录

    这篇文章主要介绍了vue3中遇到reactive响应式失效的问题记录,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • Vue分页组件的封装方法

    Vue分页组件的封装方法

    这篇文章主要为大家详细介绍了Vue分页组件的封装方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue实现父组件获取子组件的方法或属性值详解

    vue实现父组件获取子组件的方法或属性值详解

    这篇文章主要介绍了vue实现父组件获取子组件的方法或属性值详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue项目中使用TDesign的方法

    vue项目中使用TDesign的方法

    tdesign-vue是TDesign 适配桌面端的组件库,适合在 vue 2 技术栈项目中使用,这篇文章主要介绍了vue项目中使用TDesign ,需要的朋友可以参考下
    2023-04-04
  • Vue编写自定义Plugin详解

    Vue编写自定义Plugin详解

    这篇文章主要介绍了Vue编写自定义Plugin详解,在Vue开发中,我们经常需要使用一些第三方库或功能性模块,Vue插件就是一种将这些库或模块集成到Vue应用中的方式,插件是Vue.js提供的一种机制,用于扩展Vue的功能,需要的朋友可以参考下
    2023-08-08

最新评论