el-form表单存在异步校验时，如何对表单进行整体校验？

本文介绍: 当el–form 表单中某个字段需要进行异步校验，表单校验逻辑需要怎么写呢？

在项目中如果使用了element–ui的话，在需要实现表单功能的时候，肯定会使用到element–ui的el–f orm 表单来编程。

标红的这两句话很重要。

既然有了官方提供的方法，那么在提交表单前，再使用 validate 方法，对表单进行一个整体校验即可，然后我们可能会使用以下写法：

let hasError = false; //表单是否有报错的标志

//表单校验逻辑
this.$refs['ruleForm'].validate((valid) =&gt; {
    if (valid) {
        //表单有报错，将hasError置为true
        hasError = true;
    }
});

//如果表单有报错，return,阻止 表单提交
if(hasError){
    return
}

//下方是校验通过后，表单提交的逻辑
//xxxxxxx

↑↑↑↑很多同学校验表单的逻辑时，可能就会像上面这种写法，先调用 el-f orm的validate 方法，在回调函数中通过 valid来判断表单是否有报错，在调用完valid a t e 方法之后判断表单是否有报错来阻止表单提交。

let hasError = false; //表单是否有报错的标志

//表单校验逻辑（存在异步校验）
this.$refs['ruleForm'].validate((valid) =&gt; {
    if (valid) {
         
        //异步校验，异步执行，会在下面的代码if(hasError)之后执行，才能拿到异步执行的结果（正确的hasError的值）

        //表单有报错，将hasError置为true
        hasError = true;
    }
});

//如果表单有报错，return,阻止 表单提交（这里是同步执行的代码，会先执行这句，然而hasError在这一步永远是false）
if(hasError){
    return
}

//下方是校验通过后，表单提交的逻辑
//xxxxxxx


//表单校验逻辑（存在异步校验）
this.$refs['ruleForm'].validate((valid) => {
    
    if (!valid) {
         //表单校验有报错，return,代码不再往下执行
         return
    }
    
    //表单提交校验写到回调函数内
    //表单校验通过，进入表单提交逻辑
    //xxxxxxx

});

async submitForm() {
    try {
      //调用表单的validate方法，执行表单校验
      await this.$refs['ruleForm'].validate()
    }catch(e) {
      //如果表单有报错，则进入catch，此时直接return不执行表单提交
      return
    }

    //表单校验通过，进入表单提交逻辑
    //xxxxxxx
}

 <el-form-item label="名称：" prop="name">
    <el-input
          v-model.trim="formDetail.name"
          placeholder="1-20个字符"   
     />
</el-form-item>

data() {
    //校验规则
    formRules = {
        //name字段需要进行异步校验
        name: [
             validator: (rule, val, cb) => {
                  //发送ajax到服务端进行校验
                  this.$http({
                      url: "/service/ajax-checkname",
                      method: "get",
                      data: {
                          name: val
                      }
                  }).then(res => {
                      let result = res.data;
                      if (!result.status) {
                         cb(result.message); //校验不通过，报错
                      } else {
                         cb(); //校验通过
                      }
                 });
            },
            trigger: "blur"
        ]
    }
}

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

el 校验表单

方法名	说明	参数
validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise	Func t ion(callback: Func t ion(boolean, object))

前序：

隐患：

解决：

方式一：将表单提交逻辑直接 放到 回调 函数中

方式二：使用 async/await和try catch 组合来进行表单校验

补充：什么是异步校验？

发表回复取消回复

前序：

隐患：

解决：

方式一：将表单提交逻辑直接放到回调函数中

方式二：使用async/await和try catch组合来进行表单校验

补充：什么是异步校验？

相关文章

发表回复 取消回复

方式二：使用 async/await和try catch 组合来进行表单校验

发表回复取消回复