ElementUI 表单单个验证

最新推荐文章于 2024-07-11 18:43:40 发布

原创

最新推荐文章于 2024-07-11 18:43:40 发布 · 6.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了在ElementUI中实现表单项级联验证的两种方法。当表单的某个字段值改变时，影响其他字段的必填状态。方案一是拆分表单，根据条件校验不同部分；方案二是利用ElementUI的表单验证规则和Promise.all进行智能校验。

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

ElementUI 表单单个验证

今日在工作遇到一个问题,需求是这样的,总共有12个字段,其中第四个字段如果填写了,第五个,第六个和第七个就非必填,如果第五个,第六个第七个填了,第四个就非必填

实例图

如果区域选择的是北京,则只要填写前三项就可以,
如果区域选择的是上海或者不选,则校验的是全部
如下图
在这里插入图片描述

解决方法

方案一
简单粗暴,好实现,技术含量低
直接将表单按字段拆分开,分成两个或者三个的表单,根据条件,校验需要的表单.
方案二
elementUI官方在表单校验文档中已经说明,取消单个校验的方法
结合这个方法使用Promise.all校验,如果最后的数量为0则表示校验通过
ElementUI官网地址
在这里插入图片描述
代码如下

<template lang="">
  <div>
    <el-card class="box-card" style="width: 750px;margin: auto;">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="上海" value="上海"></el-option>
            <el-option label="北京" value="北京"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.date1"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>