vue+element 弹框嵌套表单并验证

最新推荐文章于 2025-05-20 11:57:06 发布

原创最新推荐文章于 2025-05-20 11:57:06 发布 · 1w 阅读

CC 4.0 BY-SA版权

本文记录了使用Vue和Element UI实现弹窗内表单验证的过程，包括遇到的问题及解决方案。在实现弹框新增功能时，表单验证成为难点。经过多次尝试，发现错误在于表单内的按钮位置，修正后成功实现功能。按照Element官方文档配置`rules`进行表单验证，简化了问题的解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做项目，需要实现一个功能，就是点击新增按钮实现弹框，弹框里面是表单，点击保存的时候对表单进行验证，这样一个功能一点一点的去实现很简单，但是聚合在一起嫩是花了我半天时间，最终实现了这个功能，我也会把我做的过程中的错误贴出来，并写上解决办法（只是我的代码出现的问题）

'Error in event handler for “click”: “TypeError: Cannot read property ‘validate’ of undefined”',

我百度这个问题花了好久好久，虽然网上也有很多和我一样遇到这个问题的朋友，但是，千篇一律都写得是这样的解决办法：

<el-button type="primary"  @click="Submit('form')">登录</el-button>
@click="Submit()"参数没有加单引号，

或者是说ref的和refs的名字要一致

 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm" :label-position="labelPosition">

submitForm(ruleForm) {
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
}

第一种说的解决办法也是一个坑，所以要加单引号；

但是，我按照上面的解决办法来改代码，还是报错，我要疯了，???，不认输，我还是继续百度，突然看到一个博主写的代码，恍然大悟

我写的错误代码

<el-dialog title="添加字典分类" :visible.sync="dialogFormVisible">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm" :label-position="labelPosition">
          <el-form-item label="字典分类名称" prop="dictCategoryCnName">
            <el-input v-model="ruleForm.dictCategoryCnName"></el-input>
          </el-form-item>
          <el-form-item label="字典分类值" prop="dictCategoryEnName" >
            <el-input v-model="ruleForm.dictCategoryEnName"></el-input>
          </el-form-item>
        </el-form>
         <el-button style="float:right;" type="primary" @click="submitForm('ruleForm')">确定</el-button>
         <el-button style="float:right;margin-right:15px" @click="resetForm('ruleForm')">取消</el-button>
      </el-dialog>

我写的正确代码

<el-dialog title="添加字典分类" :visible.sync="dialogFormVisible">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm" :label-position="labelPosition">
          <el-form-item label="字典分类名称" prop="dictCategoryCnName">
            <el-input v-model="ruleForm.dictCategoryCnName"></el-input>
          </el-form-item>
          <el-form-item label="字典分类值" prop="dictCategoryEnName" >
            <el-input v-model="ruleForm.dictCategoryEnName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="float:right;" type="primary" @click="submitForm('ruleForm')">确定</el-button>
            <el-button style="float:right;margin-right:15px" @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

不仔细看真的看不出来，原来是两个按钮是表单里面的而不是对话框里面的，阿西！！！就这样解决了！关于表单验证官网讲的很详细，也有例子，我就是按照官网来做的，在form里面加一个rules，参照我正确写法

  rules: {
        dictCategoryCnName: [
            { required: true, message: '请输入字典分类名称', trigger: 'blur' }
        ],
        dictCategoryEnName: [
            { required: true, message: '请输入字典分类值', trigger: 'blur' }
        ]
      }, //弹框表单验证

解决问题到实现完成就用了半个小时，是不是很简单！！！