Vue中使用ref、$refs绑定到form、fromItem,动态修改表单验证项和校验提示信息

Vue中使用ref、$refs绑定到form、fromItem,动态修改表单验证项和校验提示信息

转载请注明出处，原创不易，
需求是这样的, 要根据不同类型展示不同的表单项, 带验证的表单项也不一样, 当时就看了关于验证的一些方法还有github，无奈看不明白，就突然想到了ref属性，就打印看了一下，一番寻找，果然让我给找到了，嘿嘿，先上图看一看

然后进入到form对象中,是这样的

然后再点击rules, 展开他

然后点开rules,里面是这个表单里所有待验证的prop项

里面的message, required, trigger,就是我们绑定在表单里的rules

然后就可以动态的修改成你想要的

// 比如切换的时候,我去掉一个带验证的表单项的验证
this.$refs.accessPrefix.form.rules.ACCESS_PREFIX[0].required = false
后来对比了一下,第一张图片里的isRequired
this.$refs.accessPrefix.isRequired = false
 // 这两行代码的效果一样,可以不用往里找那么深,当然你要是不放心,
 可以用上面第一行的代码

如果要修改错误提示信息, 看图

下面的是修改后的提示信息

这个就用到了第一张图里的validateMessage属性

// 两行代码搞定
this.$refs.applicationName.validateMessage = '应用部署单元名称不能为空'
this.$refs.applicationName.form.rules.APPLICATION_NAME[0].message = '应用部署单元名称不能为空'

然后,切换回去的时候在改回去就行了

this.$refs.applicationName.validateMessage = '应用名称不能为空'
this.$refs.applicationName.form.rules.APPLICATION_NAME[0].message = '应用名称不能为空'

但是只修改this.$refs.applicationName.form.rules.APPLICATION_NAME[0].message这个属性的话,不会实时更新视图,因为这个form里面的属性需要触发一下验证才会更新视图, 所以就需要直接去修改验证后的信息,也就是修改validateMessage的值即可.
第一次碰到这个问题,在次记录一下