美文网首页
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