ElementUI--表单验证以及踩坑_this.$refs['ruleform'].validate-优快云博客

本文链接：https://blog.youkuaiyun.com/TingLogin/article/details/115954611

本文介绍了Vue.js中两种表单验证方法——整体验证和局部验证，并指出了其弊端，即每次验证都会发起多次请求。为了解决这个问题，提出了使用if判断进行预验证的替代方案，以减少不必要的请求。同时，讨论了这种方法的临时有效性，期待未来能找到更好的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单验证以及踩坑

验证方法–整体验证(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(()={})
   })
}

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