The verification rule in element-ui is changed to click submit for verification

now the input will constantly request data according to the event change. Instead, click the submit button to request the data. I replaced the change in trigger with blur, click submit. If the information is repeated correctly, but if the information is not repeated, you need to click submit twice to correctly perform the following operations (analysis of the reason: when you click submit for the first time, it makes input lose focus), which does not meet the requirements.?. It"s been stuck for a long time. I don"t know how to change it.

<el-dialog title="" width="30%" :visible.sync="dialog.dialogFormVisible">
      <el-form :model="dialog" ref="dialogForm" size="small" :rules="dialog.rules" @submit.native.prevent>
        <el-form-item label="" prop="name">
          <el-input :maxlength="20" v-model="dialog.name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="submitMater"></el-button>
        <el-button size="small" @click="dialog.dialogFormVisible = false"></el-button>
      </div>
    </el-dialog>
< hr >
data() {
      let sendFlag = 0;
      let checkDialogForm = (rule, value, callback) => {
        if (!value) {
          return callback(new Error(""));
        }
        this.materialname = value;
        let postData = Object.assign({}, this.postUser, {
          "materialname": value
        });
        if (sendFlag === 0) {
          sendFlag = 1;
          checkModularNameApi(postData)
            .then((res) => {
              sendFlag = 0;
              if (res.data.result === 0) {
                callback();
              } else {
                callback(new Error(res.data.message));
              }
            })
            .catch(() => {
              sendFlag = 0;
            })
        }
      };
      return {
        noticeFlag: false,
        showNotice: false,
        txtIndex: 0,
        picIndex: 0,
        btnIndex: 0,
        dialog: {
          dialogFormVisible: false,
          dialogCancelVisible: false,
          name: "",
          rules: {
            name: [
              {max: 20, message: "20", trigger: "blur"},
              {message: "(\""\\)", trigger: "blur", pattern: /^[^""\\]+$/g},
              {validator: checkDialogForm, trigger: "blur"}
            ]
          }
        },
< hr >

submitted function

 submitMater() {
          checkDialogForm();
        this.$refs["dialogForm"].validate((valid) => {
          if (valid) {
            this.dialog.dialogFormVisible = false;
            //
            let postData = Object.assign({}, this.postUser, {
              "templateid": this.templateid,
              "materialname": this.materialname,
              "pvendorid": this.product.pvendorid,
              "prstypeid": this.product.prstypeid,
              "userid": this.product.userid,
              "modules": this.list,
              "id": this.submitid,
              "wxShare": this.wxShare,
              "savetime": this.savetime,
              "ccodecheckpop": this.ccodecheckpop,
              "wxAppCheckResult": this.checkresultlist
            });
            if (this.submitstatus === "detail") {
              updateMaterialApi(postData)
                .then((res) => {
                  if (res.data.result === 0) {
                    this.$router.push(`/productlist/${this.product.pvendorid}`)
                  } else {
                    this.$message({
                      message: res.data.message,
                      type: "error"
                    });
                  }
                })
                .catch((err) => {
                  this.$message({
                    message: err,
                    type: "error"
                  });
                });
            } else {
              addMaterialApi(postData)
                .then((res) => {
                  if (res.data.result === 0) {
                    this.$router.push(`/productlist/${this.product.pvendorid}`)
                  } else {
                    this.$message({
                      message: res.data.message,
                      type: "error"
                    });
                  }
                })
                .catch((err) => {
                  this.$message({
                    message: err,
                    type: "error"
                  });
                });
            }
          } else {
            return false;
          }
        });
      }

ask for help QAQ

Apr.01,2021

trigger: "submit" should solve your problem, I guessed it myself:)

Menu