首页 > Vue >

el-form的validate()方法改成async/await的形式返回验证值

时间: 作者:admin 浏览:

在使用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方法,返回验证结果;

微信公众号
微信公众号:
  • 前端全栈之路(微信群)
前端QQ交流群
前端QQ交流群:
  • 794324979
  • 734802480(已满)

更多文章

栏目文章


Copyright © 2014-2023 seozhijia.net 版权所有-粤ICP备13087626号-4