共计 1576 个字符,预计需要花费 4 分钟才能阅读完成。
本文针对的场景是没有手动触发 el-form 的 validator 验证,然而 async-validator 主动触发(验证),控制台 async-validator 验证报错的状况。
先贴一段代码:
<template>
<el-form ref="form" :model="formData" :rules="formRules" label-width="100px" size="medium">
<el-form-item label="用户名" prop="username">
<el-input v-model="formData.username"></el-input>
</el-form-item>
<el-form-item label="明码" prop="password">
<el-input type="password" v-model="formData.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm"> 提交 </el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {data() {
return {
formData: {
username: '',
password: ''
},
formRules: {
username: [{ required: true, message: '请输出用户名', trigger: 'blur'}
],
password: [{ required: true, message: '请输出明码', trigger: 'blur'},
{min: 6, max: 20, message: '明码长度在 6 到 20 个字符之间', trigger: 'blur'}
]
}
};
},
methods: {submitForm() {
this.$refs.form.validate(valid => {if (valid) {
// 表单验证通过,能够进行提交操作
// ...
} else {
// 表单验证未通过
return false;
}
});
}
}
};
</script>
这段代码中咱们在 submitForm 时通过 this.$refs.form.validate 来验证表单中的 username 和 password 字段,这没有问题。
el-from 验证调用了 async-validator,下面的状况是提交时手动触发 validator。
本文说的是没有手动触发 validator 验证,然而控制台 async-validator 报错 (async-validator 主动触发) 的状况。
当 el-from 上 rules 属性绑定的验证规定发生变化(即 :rules=”formRules” 中的 formRules 变更) 无论是 formRules 的对象内存地址变动,还是对象中的 key 或者 key 对应的 value 变更,都会触发 async-validator。
说个场景,如未满 18 岁用户须要验证监护人。用 computed 来做 rules 判断
computed: {formRules() {const basicRules = {...};
if (age < 18) {
return {
...basicRules,
otherRules
}
}
return basicRules;
}
}
这时候来回切换用户信息,表单就会产生没有手动触发校验,但自行校验的状况。
解决这个问题有两种思路
1、拆分 rules 同时拆分表单,一个表单拆为两个表单,两个表单绑定两套验证规定
2、不拆分表单,但每次绑定值发生变化时,通过 clearValidate() 清空验证状态。
完结。
同步更新到本人的语雀
https://www.yuque.com/dirackeeko/blog/ih59cyi0r97kcnke
正文完