ElementUI--表单验证以及踩坑

表单验证以及踩坑

• 验证方法–整体验证(validate)

this.$refs["ruleForm"].validate((valid) => {
    if(valid){
       //这里执行你验证通过需要用的代码
    }else{
       //这里执行验证未通过的代码
       console.log("error submit!!");
       return false;
    }
}

• 验证方法–局部验证(validateField)

- 单个验证

this.$refs["ruleForm"].validateField("phone", (valid) => {
   if(valid){
       //这里执行你验证通过需要用的代码
    }else{
       //这里执行验证未通过的代码
       console.log("error submit!!");
       return false;
    }
}

- 多个验证

this.$refs["ruleForm"].validateField(['username','password'], (valid) => {
  if(valid){
       //这里执行你验证通过需要用的代码
    }else{
       //这里执行验证未通过的代码
       console.log("error submit!!");
       return false;
    }
}

• 弊端☝

上述验证方法你验证几个就会发起几次请求，暂时还没有想到解决方案

• 替代方案-if判断

handleClick(){
   let that = this;
   let validData = {
       username:that.ruleForm.username,
       loginpassword:that.ruleForm.loginpassword
   };
   if (validData .username == '' || validData .loginpassword == '') {
           this.$refs["ruleForm"].validateField("phone");
           this.$refs["ruleForm"].validateField("loginpassword");
   } else {
           //这里执行你验证通过需要用的代码
           //Forexample:
           this.$api.login.post().then((res)=>{}).catch(()={})
   })
}

上述验证方法可以暂时解决，还没有其他更好的思路，等后面有更好方案继续更新