美文网首页
ElementUI同一个表单部分验证和全部验证

ElementUI同一个表单部分验证和全部验证

作者: FRESHOME | 来源:发表于2020-05-24 23:31 被阅读0次
    image.png

    功能点:

    1、点击“获取验证码”对上面3个input进行验证

    2、点击确定对整个表单进行验证

    // 获取验证码
    
        getCode() {
    
          this.disableGetCode = true;
    
          const p1 = new Promise(resolve => {
    
            this.$refs["form"].validateField("orgid", err => {
    
              resolve(err);
    
            });
    
            resolve();
    
          });
    
          const p2 = new Promise(resolve => {
    
            this.$refs["form"].validateField("name", err => {
    
              resolve(err);
    
            });
    
            resolve();
    
          });
    
          const p3 = new Promise(resolve => {
    
            this.$refs["form"].validateField("tel", err => {
    
              resolve(err);
    
            });
    
            resolve();
    
          });
    
          // 全部验证通过才发送请求
    
          Promise.all([p1, p2, p3])
    
            .then(result => {
    
              if (!result.join("")) {
    
                this.codeMessage = 60;
    
                let s = setInterval(() => {
    
                  this.codeMessage--;
    
                }, 1000);
    
                let s1 = setTimeout(() => {
    
                  clearInterval(s);
    
                  this.disableGetCode = false;
    
                  this.codeMessage = "获取验证码";
    
                }, 1000 * 60);
    
              // 发送验证码请求
    
              } else {
    
                this.disableGetCode = false;
    
              }
    
            })
    
            .catch(() => {
    
              this.disableGetCode = false;
    
            });
    
            }
    
    // 确定
    
    confirm() {
    
          this.$refs["form"].validate(valid => {
    
            if (valid) {
    
            // 验证通过
    
            }
    
          });
    
        },
    

    相关文章

      网友评论

          本文标题:ElementUI同一个表单部分验证和全部验证

          本文链接:https://www.haomeiwen.com/subject/zmosahtx.html