基于Vue elementUI实现动态表单的验证功能(根据条件动态切换验证格式)

前言

在开发过程中，需要根据用户选择的联系方式动态改变输入框的检查条件，可以增加整个表单

在线访问：动态表单验证

Github(欢迎之星): https://github.com/Mrblackant.

思考几个问题

1.整个表单可以添加，所以要遍历生成；

2.要切换联系人信息(手机/座机)，是要切换后面不同类型的输入框还是只更改勾选规则(本文动态更改勾选规则)

实现

1.在验证1.elementui的表单表单时，应该将prop属性添加到当前的el-form-item中，因为我们遍历生成的表单，那么我们的书写应该写成：

关注道具属性

formdata . list ' El-form-item : ref=' index ' concat value ' ' : prop=' list '中的模板v-for='(k，index)。索引。concat value ' ' : rules=' k . rules ' El-input v-model=' k . c Onstatvalue '/El-input/El-form-item/template 2。因为我选择了根据类型动态修改检查规则，而不是切换不同类型的输入框，

请注意上述代码中的参考和规则。当类型切换时，rules=k.rules的相应规则也将被修改。ref属性用于在切换联系人信息类型时清除之前的提示。

查看不同类型的验证规则，首先将它们放在一个地方：

输入： {//设置所需的检查规则电话： {模式：/1 [3-9] \ d {9} $/，消息：“错误的手机号码格式”，触发器：“模糊”}。phone : { pattern n 3360/\ d { 10，12} $/，message: '座机号码格式错误'，trigger3360 '模糊' }，QQ : { pattern n 3360/[1-9][0-9]{ 4，Message: 'QQ格式错误'，trigger: '模糊' }，mail 3360 { pattern :/([a-za-z0-9][_ | \ _ | \。]?)*[a-Za-Z0-9][email protected]([a-Za-Z0-9][_ | \ _ | \。]?)* [a-za-z0-9] \。[a-za-z] {2，3} $/，message: '错误的邮箱格式'，trigger: '模糊' } }，3。如果您的联系信息的所有值都是必需的，您可以先写一个统一的必需检查。

const baseRule=[{ required d : true，message: '请填写联系信息'，trigger: 'blur' }]然后在切换支票类型时连接所需的支票baserules。

//向表单中添加新的检查。这个。form data . list[index]。规则=[这个。输入[数据]]。concat (baserule)动态表单检查和动态检查规则并不太难，有时会混淆，所以拿出来记录一下。欢迎您指出更好的解决方案。

摘要

以上是边肖介绍的基于Vue elementUI的动态表单验证功能(根据条件动态切换验证格式)，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！