ElementPlus 表单验证

最新推荐文章于 2024-06-21 09:36:23 发布

wj1713520

最新推荐文章于 2024-06-21 09:36:23 发布

阅读量5.1k

点赞数 11

分类专栏： CSS 文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/wj1713520/article/details/123515108

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js中删除无关的script标签，移除无效导入，以及调整ref定义，从而解决表单验证和重置函数的错误。主要涉及Vue的表单处理、ref使用及TypeScript类型定义。修复后的代码使得submitForm和resetForm函数能够正确运行，避免了类型错误。

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

1.删掉script标签中的 lang='ts'

2.删掉：

import type { FormInstance } from 'element-plus'

3.改写：

const ruleFormRef = ref<FormInstance>()

为：

const ruleFormRef = ref('')

4.删掉下面代码中的 : FormInstance | undefined

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

删掉之后的：

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}

即可解决报错。