表格数据——表单校验

崛起猩球@悟空

已于 2024-03-26 13:31:18 修改

阅读量319

点赞数 7

文章标签：前端 elementui

于 2024-03-26 13:17:39 首次发布

本文链接：https://blog.csdn.net/Connie_wuxx/article/details/137042545

版权

文章讲述了在Vue应用中使用ref进行元素引用，并在表单验证时遇到的问题。作者提供了两种解决方案：一是使用`clearValidate()`方法并在`nextTick()`中调用，二是利用`v-if`实现每次打开弹框时的重新渲染以清除验证状态。

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

添加校验：

通过 rules 属性传入约定的验证规则;

在Vue框架中，ref是一个特殊的属性，用于给元素或子组件注册引用信息。这个引用信息会被注册在父组件的$refs对象上。如果ref应用在普通的DOM元素上，那么它指向的就是这个DOM元素；如果应用在组件标签上，那么它指向的就是这个组件实例。通过this.$refs可以获取到ref注册过的元素或组件，并可以调用其方法;

form-item 的 prop 属性设置为需校验的字段名;

<el-form :model="addForm" :rules="rules" ref="addForm1">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addForm.name" :disabled="isView || !isAdd"></el-input>
        </el-form-item>
</el-form>

 rules: {
          name: [{ required: true, message: '请输入姓名', trigger: 'change' }]
        }

//新增时：
this.$refs[addForm].validate((valid) => {
            if (valid) {
              this.tableData.unshift(this.addForm)
              this.allData.unshift(this.addForm)
              this.dialogVisible = false
            } else {
              return false
            }
          })

//编辑时：
this.$refs[addForm].validate((valid) => {
              if (valid) {
                this.tableData.splice(index, 1, this.addForm)
                this.allData = [...this.tableData]
                this.dialogVisible = false
              } else {
                return false
              }
            })

清除校验：

问题描述:打开弹框,点击确定,出现校验提示,关闭弹框,再次打开弹框校验提醒还在;

预期效果:每次打开弹框,清除校验;

解决方法1:

每次打开弹框，运用clearValidate()：

this.$refs['addForm1'].clearValidate()

但是，在获取元素延迟时，报错，加一个下次刷新时调用 nextTick()：

this.$nextTick(() => {
this.$refs['addForm1'].clearValidate()
})

解决方法2：

每次打开弹框，刷新弹框v-if:

<el-dialog :visible.sync="dialogVisible" v-if="dialogVisible">
 <el-form :model="addForm" :rules="rules" ref="addForm1">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addForm.name" :disabled="isView || !isAdd"></el-input>
        </el-form-item>
 </el-form>
</el-dialog>