Vue 多表单检验
1.应用场景:当需要使用到多个form表单;每个form绑的ref值不同;可以理解为这个ref是这个form的id。
2.校验方法:this.$refs[“formname”].validate,这个是elementui里面自带的校验方法;
还需要使用ES6的新特性,promise;promise其实就是一个构造函数
3.代码:
这是js部分,template里面只需要写form表单就可以了

 const base = new Promise((resolve, reject) => {
        this.$refs["aform"].validate(valid => {
          if (valid) {
            resolve();
          }
        });
      });
      const soap = new Promise((resolve, reject) => {
        this.$refs["bform"].validate(valid => {
          if (valid) {
            resolve();
          }
        });
      });
      const http = new Promise((resolve, reject) => {
        this.$refs["cform"].validate(valid => {
          if (valid) {
            resolve();
          }
        });
      });
      const mq = new Promise((resolve, reject) => {
        this.$refs["dform"].validate(valid => {
          if (valid) {
            resolve();
          }
        });
      });
      const sql = new Promise((resolve, reject) => {
        this.$refs["eform"].validate(valid => {
          if (valid) {
            resolve();
          }
        });
      });
      const tcp = new Promise((resolve, reject) => {
        this.$refs["fform"].validate(valid => {
          if (valid) {
            resolve();
          }
        });
      });
      if (this.addlist.AdapteroptionsValue == "SOAP") {
        Promise.all([base, soap]).then(() => {
          this.subscriberRegisterSave();
          this.$message.success("新建成功");
          this.dialogFormVisible = false;
          this.$refs["aform"].resetFields();
          this.$refs["bform"].resetFields();
          this.$refs["cform"].resetFields();
          this.$refs["dform"].resetFields();
          this.$refs["eform"].resetFields();
          this.$refs["fform"].resetFields();
        });
      }
Logo

前往低代码交流专区

更多推荐