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

csstmg

已于 2024-03-14 10:55:45 修改

阅读量648

点赞数 1

文章标签： javascript vue.js 前端

于 2024-03-13 11:08:16 首次发布

本文链接：https://blog.csdn.net/csstmg/article/details/136674434

版权

本文介绍了一个使用Vue.js实现的表单案例，展示了如何在表格中添加文案链接输入框，并进行URL格式的校验，确保用户输入有效链接。

摘要由CSDN通过智能技术生成

在这里插入图片描述

简单案例

<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('请输入正确的链接格式')) // 校验不通过，返回错误信息
  }
}