vue 根据表单某一选项选中值，动态的改变表单验证内容（添加或去掉验证）

最新推荐文章于 2024-11-08 11:33:32 发布

Aku_2020

最新推荐文章于 2024-11-08 11:33:32 发布

阅读量1.4k

点赞数

分类专栏： vue 文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/Aku_2020/article/details/125296126

版权

根据Vue组件中表单某一选项的选择值，动态修改表单验证规则，实现添加或移除特定验证项。利用Vue的数据绑定和响应式系统，结合Element UI的表单验证功能，实现灵活的表单验证逻辑。

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

<el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="80px">
  <el-form-item label="活动名称"  prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域"  prop="region">
    <el-select v-model="form.region" placeholder="请选择活动区域"  @change="regionChange">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
<script>
  exp