【ElementUI 表单校验】一个 el-form-item 下多个表单校验（循环校验）

MagnumHou

已于 2023-11-15 20:55:51 修改

阅读量4.3k

点赞数 1

分类专栏： Vue 文章标签： elementui 表单校验 rules

于 2023-06-07 15:57:51 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39335404/article/details/131089174

版权

本文介绍了如何在ElementUI中实现一个el-form-item下的多个表单元素循环校验，详细讲解了表单属性、方法、规则设置以及事件处理，包括validate、resetFields等关键操作，帮助开发者解决批量表单验证问题。

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

前端项目开发中，表单的应用是必不可少的，不管使用的原生、还是框架如：ElementUI、Ant Design Vue 等。基本的表单应用比较简单，按照文档中的描述使用即可。

官网地址
 数字化管理平台
 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
个人博客地址

如下图：
在这里插入图片描述
使用 ElementUI 中的表单代码如下：

<el-form
  ref="addForm"
  :model="form"
  :rules="rules"
  inline
  label-width="100px"
  class="demo-ruleForm"
>
    <div class="item-title">页面配置</div>
        <div class="left">
          <el-form-item label="客户端:" prop="client" required>
            <el-select
              v-model="form.client"
              placeholder="请选择"
              style="width:300px"
              @change="selectChange($event, 'client')"
            >
              <el-option
                v-for="item in enumObj.client"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                size-full="100%"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="页面名称:" prop="webName">
            <el-input
              v-model="form.webName"
              placeholder="请输入"
              style="width:300px"
            />
          </el-form-item>
          <el-form-item label="H5链接:" prop="webUrl">
            <el-input
              v-model="form.webUrl"
              placeholder="请输入"
              style="width:300px"
            />
          </el-form-item>
          <el-form-item label="选择模板:" prop="selectMode">
            <el-select
              v-model="form.selectMode"
              placeholder="请选择"
              style="width:300px"
              clearable
            >
              <el-option
                v-for="item in enumObj.selectMode"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                size-full="100%"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="页面主标题:" prop="webMainTitle">