Vue项目中多端登录切换时两个表单验证报错问题解决方案

做多端登录时，每一种登录方式用一个表单取提交，在切换表单的时候，表单的el-input的校验规则rules会出现如下bug部分代码如下：解决方案：每个表单添加key值即可修改后的效果：问题本质：即使两个表单绑定的值不同，但是浏览器在解析时，先解析第一个表单，此时表单上是没有绑定ref，之后再解析第二个表单时，浏览器发现这它的prop和第一个表单的prop一样，所以就认为这两个表单是同一个表单，就没

SmallTeddy

2868人浏览 · 2020-06-04 11:10:17

SmallTeddy · 2020-06-04 11:10:17 发布

做多端登录时，每一种登录方式用一个表单取提交，在切换表单的时候，表单的el-input的校验规则rules会出现如下bug
在这里插入图片描述

部分代码如下：

解决方案：每个表单添加key值即可

修改后的效果：

问题本质：即使两个表单绑定的值不同，但是浏览器在解析时，先解析第一个表单，此时表单上是没有绑定ref，之后再解析第二个表单时，浏览器发现这它的prop和第一个表单的prop一样，所以就认为这两个表单是同一个表单，就没有重新渲染，而ref本身是作为渲染结果被创建的，所以第二个表单没能成功绑定ref，验证就无法生效。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^