el-form无法提交表单，提交表单没反应（vue2）

最后查出来是自定义表单校验规则写错了，校验通过的时候，没有执行callback()。补上之后就正常了。

实例（修正后）

<div class="form-box">
      <el-form
        label-position="right"
        label-width="80px"
        :model="formLabelAlign"
        ref="ruleForm"
        :rules="rules"
        status-icon
      >
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="formLabelAlign.name"
            placeholder="请填写姓名"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input
            v-model="formLabelAlign.phone"
            placeholder="请填写手机号码"
            maxlength="11"
          ></el-input>
        </el-form-item>
        <el-form-item label="所在城市" prop="address">
          <el-input
            v-model="formLabelAlign.address"
            placeholder="请填写所在城市"
            @focus="openAddres"
          ></el-input>
        </el-form-item>
        <el-form-item label="需求描述" prop="dec">
          <el-input
            type="textarea"
            v-model="formLabelAlign.dec"
            placeholder="请填写需求描述"
            :autosize="{ minRows: 5, maxRows: 10 }"
            maxlength="100"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交预约</el-button
          >
        </el-form-item>
      </el-form>

需要配的参数：

 ref="ruleForm"
 :rules="rules"
  prop="name"

自定义规则

 data() {
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("名称不能为空"));
      } else {
            callback();
          }
    };
    //配置自定义规则
    let checkPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("手机号不能为空！"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        const isPhone = reg.test(value);
        value = Number(value); //转换为数字
        if (typeof value === "number" && !isNaN(value)) {
          //判断是否为数字
          value = value.toString(); //转换成字符串
          if (value.length < 0 || value.length > 12 || !isPhone) {
            //判断是否为11位手机号
            callback(new Error("手机号码格式如:138xxxx8754"));
          } else {
            callback();
          }
        } else {
          callback(new Error("请输入电话号码"));
        }
      }
    };
    let checkAddress = (rule, value, callback) => {
      if (!value) {
        callback(new Error("地址不能为空！"));
      } else {
            callback();
          }
    };
    let checkDec = (rule, value, callback) => {
      if (!value) {
        callback(new Error("需求描述不能为空！"));
      } else {
            callback();
          }
    };
    return {
      formLabelAlign: {
        name: "",
        phone: "",
        address: "",
        dec: "",
        abuild_company_id: 0,
        decoration_company_id: this.$route.query.id,
      },
      rules: {
        name: [{ validator: checkName, trigger: "blur" }],
        phone: [{ validator: checkPhone, trigger: "blur" }],
        address: [{ validator: checkAddress, trigger: "blur" }],
        dec: [{ validator: checkDec, trigger: "blur" }],
      },
      area: [], //地址选项
      isOpen: false,
    };
  },

自己跳的坑：
1、prop="phone "  留空，验证失败
2、if (!value) {   return callback(new Error("名称不能为空")); } else { callback()}
不加else
 

提交

 // 提交表单
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        console.log('valid',valid);
        if (valid) {
          alert("submit!");
          let data = {
            realname:this.formLabelAlign.name,
            mobile:this.formLabelAlign.phone,
            city_name:this.formLabelAlign.address,
            description:this.formLabelAlign.dec,
            abuild_company_id:this.formLabelAlign.abuild_company_id,
            decoration_company_id:this.formLabelAlign.decoration_company_id,
          };
          this.$api.cityOfDesign.submit_build_contact(data).then((res) => {
            // console.log('res',res);
             this.$message({
              message: "预约成功！",
              type: "success",
            });
          });
          this.isOpen = false;
          this.$router.back();
        } else {
        //   console.log("error submit!!");
          return false;
        }
      });
    },

axios请求遇到问题，接口不返回数据
原因：接口没通
 这里应该是WAP