【ElementPlus】el-form使用技巧：动态切换校验规则的最佳实践

喵~

今天分享一篇在 ElementPlus 中使用 el-form 动态切换校验规则 的实用方法。

一、问题概述

作为前端开发人员，在开发项目中，特别是后台管理系统，表单的使用是必不可少的。当业务需求复杂时，常常需要根据不同的参数动态切换校验规则。

当动态切换校验规则时，可能会出现一些意想不到的状况，

比如：

问题 1

• 如果触发了一个规则，表单报红后没有reset，再切换新规则，则原有规则的报红依旧显示的问题；

问题 2

• 表单会主动触发新规则的校验，导致表单直接报红；

根据上述2个问题，解决方案如下：

二、项目配置

名称	版本
element-plus	^2.8.8
vue	^3.5.12
typescript	~5.6.3

这里采用了 vue + ts 的开发方式，不喜欢 ts 的小伙伴可以根据项目自行删除不需要的代码~

三、解决方案

整体代码是在 ElementPlus form 校验功能模块的基础上进行优化升级的~
代码做了精简，重点突出解决方案的代码~

源码在此处：https://element-plus.org/zh-CN/component/form.html

项目引入必要代码

import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

接下来进行优化升级：

1. 定义规则

（1）TS接口

interface IRuleFormOne {
  name: string
  region: string
  count: string
}

interface IRuleFormTwo {
  delivery: boolean
  location: string
  type: string[]
  resource: string
  desc: string
}

/**
* 此处需要汇总一个完整规则，用于整体表单
*/
interface RuleForm extends IRuleFormOne, IRuleFormTwo{}

（2）规则

const rulesOne = reactive<FormRules<IRuleFormOne>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
})

const rulesTwo = reactive<FormRules<IRuleFormTwo>>({
  location: [
    {
      required: true,
      message: 'Please select a location',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
})

/**
* 可以先给表单赋一个初始规则
*/
const rules = ref<FormRules>(rulesOne)

2. 表单值

const ruleForm = reactive<RuleForm>({
  name: 'Hello',
  region: '',
  count: '',
  delivery: false,
  location: '',
  type: [],
  resource: '',
  desc: '',
})

3. 功能按钮

这里不是重点，用什么切换都可以，此处我用了两个普通按钮，并定义了 handleClickRule 方法来切换规则

/**
* Template部分
*/
<el-button-group class="rule-btn-group">
    <el-button :type="actBtn === 1 ? 'primary' : ''" @click="handleClickRule(1)">规则一</el-button>
    <el-button :type="actBtn === 2 ? 'primary' : ''" @click="handleClickRule(2)">规则二</el-button>
  </el-button-group>

/**
* TS部分
*/
const actBtn = ref(1)

4. 实现切换规则

解决问题1

/**
* 这里是 Element Plus 原有代码，不需要优化，只是后面会用到，所以直接展示在这里
*/
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

/**
* 重点在这里！
*/
function handleClickRule(idx: number) {
  actBtn.value = idx

  switch (idx) {
    case 1:
	/**
	* 这一行很关键，解决问题1，切换前，先清除已有的报红
	*/
      resetForm(ruleFormRef.value)
      
      rules.value = rulesOne
      break
    case 2:
      resetForm(ruleFormRef.value)
      rules.value = rulesTwo
      break
    default:
      break
  }
}

解决问题2

el-form 添加一条属性配置即可解决：

 <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    :size="formSize"
    status-icon
    :validate-on-rule-change="false" 
  >

官方提供了现成的解决方案，原出处说的很清楚：

完整操作效果展示：

四、结语

至此，问题1、2都完美解决，其实很多功能看文档就能够解决大部分问题了。

有任何问题的小伙伴可以留言交流~