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

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) {

        // 验证通过

        }

      });

    },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。