在使用elementUI的el-form时,使用表单验证的方法validate(),发现只能使用回调的写法获取验证值:
<el-form ref="form" :model="ruleForm" :rules="rules">
<el-form-item prop="textRequired">
<el-input v-model="ruleForm.textRequired" />
</el-form-item>
<el-form>
//第一种:包围式/嵌套回调式写法
this.$refs.form.validate((valid)=>{
if(valid){
//验证通过的代码
}else{
//验证不通过的代码
}
})
那如何改成async/await那种可以在等号左边获取到验证后的值呢?直接上代码,在上面的el-form的基础上:
//第二种:async/await同步式写法
export default{
data()
return {
}
}
methods:{
async verify(){
let valid = await this.$refs.form.validate().catch((err)=>{return err})
if(valid){
//验证通过的代码的
}else{
//验证不通过的代码
}
}
}
}
注意:validate()方法里面为空时,会返回一个Promise,验证通过返回true,但是验证不通过会报异常进入默认的catch,无法执行下一行,所以要自定义catch方法,返回验证结果;