当前位置: 首页 > article >正文

vue3 el-form中嵌套el-tabale 对输入动态校验

在这里插入图片描述

简单案例

<el-form :model="Form" :rules="rules" ref="FormRef" class="formDiv">
  <el-table :data="Form.copyWriters" style="width: 100%">
        <el-table-column label="文案链接">
          <template #default="{ row, $index }">
            <el-form-item class="centered-input" :prop="'copyWriters.' + $index + '.url'" :rules="rules.url">
              <el-input v-model.trim="row.url" placeholder="请输入文案链接"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
   </el-table>
</el-form>


const Form = ref({
  copyWriters: [
    { name: 'John', url: '', isShow: true },
    { name: 'Smith', url: '', isShow: false },
  ],
})

const rules = ref({
  url: [
    {
      required: true,
      message: '不能为空',
      trigger: 'blur',
    },
    {
      validator: validatePass,
      trigger: ['blur', 'change'],
    },
  ],
})

const validatePass = (rule, value, callback) => {
  const regExp = /^(http|https):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$/
  if (regExp.test(value)) {
    callback() // 校验通过
  } else {
    callback(new Error('请输入正确的链接格式')) // 校验不通过,返回错误信息
  }
}

http://www.kler.cn/a/272090.html

相关文章:

  • 解锁C# EF/EF Core:从入门到进阶的技术飞跃
  • 【深度学习入门】深度学习知识点总结
  • solidity基础 -- 存储类型
  • 顺序表和链表(详解)
  • 26考研资料分享 百度网盘
  • windows git bash 使用zsh 并集成 oh my zsh
  • 算法-贪心-122. 糖果传递
  • js截取字符串的几种方法
  • 海豚调度系列之:任务类型——SQL节点
  • JavaSE、JavaEE和Jakarta EE的历史、区别与联系
  • C#创建第一个PIESDK模版的项目
  • 力扣100热题:两、三、四数之和,哈希+数组+双指针+排序
  • 【智能算法】斑鬣狗优化算法(SHO)原理及实现
  • UE4 虚幻4快捷键教程
  • Rust 如何优雅关闭 channel
  • JVM实战篇
  • HTML静态网页成品作业(HTML+CSS)——游戏战地介绍设计制作(4个页面)
  • C#设计原则
  • 基于Java+SpringMVC+vue+element实现前后端分离校园失物招领系统详细设计
  • 数据集成工具 ---- datax 3.0
  • 6.【Linux】进程间通信(管道命名管道||简易进程池||简易客户端服务端通信)
  • Rust基础知识讲解
  • 图像分割的定义
  • ChatGPT登陆提示:“Please unblock challenges.cloudflare.com to proceed…”
  • 替代imx6ull mfgtool的方法
  • Leetcode 1. 两数之和