element ui使用v-for循环form表单校验的实现

最新推荐文章于 2025-04-15 13:31:40 发布

瞎转悠达

最新推荐文章于 2025-04-15 13:31:40 发布

阅读量6.7k

点赞数 1

文章标签： md5 javac sdl vue quartz

本文链接：https://blog.youkuaiyun.com/qq_35859392/article/details/109666837

版权

本文详细介绍了如何在 Vue.js 应用中，特别是在使用 Element UI 框架时，利用 v-for 循环对 form 表单进行数据校验。通过自定义验证规则和 Vue 的响应式特性，确保每个表单项都能正确地进行验证。

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

<template>
  <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">
    <el-row v-for="(domain, index) in dynamicValidateForm.persons" :key="domain.key">
      <el-col :span="8">
        <el-form-item :label="'姓名' + index+1" :prop="'persons.' + index + '.name'" :rules="rules.name">
          <el-input v-model="domain.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item :label="'手机号码' + index+1" :prop="'persons.' + index + '.iphone'" :rules="ru