喵~
今天分享一篇在 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
微信截图_20241124141629.png
项目引入必要代码
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"
>
官方提供了现成的解决方案，原出处说的很清楚：
微信截图_20241124145004.png
完整操作效果展示：
动画.gif
四、结语
至此，问题1、2都完美解决，其实很多功能看文档就能够解决大部分问题了。
有任何问题的小伙伴可以留言交流~
