### 如何在 `
el-form` 中
动态添加表单
校验规则
为了实现 `
el-form` 的
动态校验规则，在定义初始的 `rules` 对象时可以预留一些灵活性，以便后续能够向特定字段追加新的验证条件。当需要更新某个输入项的校验逻辑时，可以通过修改
Vue 实例中的数据属性来完成这一操作。
对于基于数组渲染的情况，假设有一个名为 `items` 的列表用于通过 `v
-for` 循环生成多个 `
el-form-item` 元素，并且希望针对这些条目设置个性化的检验标准，则可以在 JavaScript 部分维护一个映射关系，该映射关联每一条记录与其对应的验证器集合[^1]。
下面是一个具体的例子展示怎样做到这一点：
```javascript
// 定义初始的数据模型和默认规则
data() {
return {
register
Form: { items: [] }, // 假设这是你要收集的信息结构体
rules: {} // 初始化为空的对象，稍后会填充实际规则
};
},
methods: {
add
FormItem(itemIndex, newRule) {
const key = `items.${itemIndex}.value`; // 构建唯一的 prop 键名
this.$set(this.rules[key], 'push', [
...this.rules[key] || [], // 如果已有规则则保留原有规则并扩展新规则
newRule // 插入的新规则
]);
// 更新视图上的 prop 属性以反映最新的规则变化
this.$nextTick(() => {
this.$refs.
form.validateFi
eld(key); // 手动触发指定域的重新验证
});
}
}
```
在此基础上，HTML 模板部分应当如下所示配置：
```html
<template>
<
el-form ref="
form" :mod
el="register
Form" :rules="rules">
<!
-- 使用 v
-for 来遍历 items 数组
-->
<div v
-for="(item, index) in register
Form.items" :key="index">
<
el-row>
<
el-col :span="8">
<
el-form-item :lab
el="'Item' + (index+1)" :prop="`items.${index}.value`">
<
el-input v
-mod
el="item.value"></
el-input>
</
el-form-item>
</
el-col>
</
el-row>
</div>
<!
-- 提交按钮或其他控件可放置于此处
-->
</
el-form>
</template>
```
上述代码片段展示了如何利用
Vue.js 和
Element UI 创建支持
动态调整校验策略的多项目录入界面。每当调用 `add
FormItem()` 方法并向其传递目标索引以及新增的约束条件之后，就会自动刷新相应的区域并且立即执行一次局部有效性检查[^2]。
本文探讨了两种代码校验方式：一是直接在rules中进行验证，二是通过处理JSON数据结构进行验证。作者可能分析了这两种方法的优缺点和适用场景。
扫一扫
666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
