问题描述
按照官方例子调用validate
方法:
this.$refs.registerForm.validate((valid) => {
console.log(valid)
if (valid) {
// this.registerNext = true
} else {
return false
}
})
发现不管表单中内容是否检验通过,valid
参数的值始终为true
。
原因及解决方法
通过查阅文档发现出现这个问题的原因是对于同一个校验规则rules
,我同时在多个同名表单(即ref
名相同)中使用了该规则。虽然rules
能够对每个el-form
里的表单进行校验,但返回回来的valid
只代表最后一个el-form
的状态。
因此解决方案即为将用了同一rules的多个表单的ref属性命名为不同的即可,在调用validate
校验时,只会校验该表单下的属性是否符合相应的规则。