vue elementUI form组件动态添加el-form-item rules且支持添加自定义校验方法

vue elementUI form组件动态添加el-form-item rules且支持添加自定义校验方法

组件动态添加el-form-item并且动态添加rules的方法可以参考博客:

vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法

添加自定义校验方法

el-form-item添加validatePassFun方法

<el-form-item
v-for="(item, index) in form.key_list"
:prop="'key_list.' + index + '.label'"
:rules="[
  {required: true, message: $t('请输入'), trigger: 'blur'},
  validatePassFun('值不能重复', form.key_list, 'change'),
  validatePassFun('名称不能重复', form.key_list, 'blur')
]"
:key="index">

</el-form-item>

validatePassFun

 validatePassFun(msg, _data, action) {
     return {
         required: true,
         validator: (rule, value, cb) => {
             if (_data不符合校验条件) {
                 cb(new Error(msg))
             } else {
                 cb()
             }
         },
         trigger: action
     }
 }

(rule, value, cb) 为默认参数赋值,应该用_data和value等组合做业务逻辑校验。

相关推荐

  1. element ui 添加定义方法

    2024-04-13 08:40:05       32 阅读
  2. el-upload添加FormData参数,定义上传接口

    2024-04-13 08:40:05       52 阅读
  3. element ui form添加校验规则

    2024-04-13 08:40:05       25 阅读
  4. wpf 为定义添加滚动条

    2024-04-13 08:40:05       57 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-13 08:40:05       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-13 08:40:05       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-13 08:40:05       87 阅读
  4. Python语言-面向对象

    2024-04-13 08:40:05       96 阅读

热门阅读

  1. Scanner类的使用步骤

    2024-04-13 08:40:05       37 阅读
  2. 【ssh】群晖 ssh clone github 远程仓库

    2024-04-13 08:40:05       36 阅读
  3. ClickHouse 与 MySQL 介绍与比较

    2024-04-13 08:40:05       44 阅读
  4. Crow 一个c++的后端开发库,类似spring boot、flask等

    2024-04-13 08:40:05       48 阅读
  5. JDK、JRE 及 JVM 是什么?

    2024-04-13 08:40:05       56 阅读
  6. ChatGPT引领论文写作新潮流

    2024-04-13 08:40:05       45 阅读
  7. LeetCode 2923. 找到冠军 I——每日一题

    2024-04-13 08:40:05       37 阅读
  8. 黑龙江等保测评Linux服务器的三种配置 IP方法

    2024-04-13 08:40:05       44 阅读