Element Plus Form 动态表单自定义校验规则使用教程

Element Plus，基于 Vue 3，面向设计师和开发者的组件库

Element Plus 官网：https://element-plus.org/zh-CN/

Element Plus Form 动态表单自定义效验规则，官网示例代码中没有，官网示例中的动态表单是固定的规则，本文讲解动态表单自定义规则的使用

目录

1、官网动态表单示例代码

2、表单自定义规则

3、动态表单自定义规则

3.1、单字段动态表单

3.2、多字段动态表单

4、总结

---

1、官网动态表单示例代码

先看官网动态表单示例代码

运行效果

这个是把 rules 写死在 el-form-item 标签上的

2、表单自定义规则

官网的自定义规则是在 el-form 标签上添加 rules 属性，并在 rules 属性中定义自定义规则，el-form-item 标签通过 prop 属性对应找到规则

官网示例代码

运行效果

3、动态表单自定义规则

动态表单自定义规则就是将动态表单和自定义规则结合，在 el-form-item 标签属性 rules 上添加自定义规则

3.1、单字段动态表单

看下面代码

运行效果

3.2、多字段动态表单

运行效果

4、总结

动态表单自定义效验规则，是将官网 rules 对象改成数组后，添加自定义规则即可，这种方式同样适用于 View UI Plus，下面是  View UI Plus 代码

运行效果

至此完