vue+typescript配合elementui表单验证

模板

 <el-form ref="certificateForm" :rules="certificateRule" :model="certificateForm">
                    <el-form-item label="企业名称" prop="userName" >
                      <el-input v-model="certificateForm.userName" type="text" size="small"></el-input>
                    </el-form-item>
                     <el-form-item label="手机号" prop="mobilePhoneNo">
                      <el-input v-model="certificateForm.mobilePhoneNo" type="text" size="small" v></el-input>
                    </el-form-item>
                     <el-form-item label="营业执照证件号码" prop="identityNo">
                      <el-input v-model="certificateForm.identityNo" type="text" size="small"></el-input>
                    </el-form-item>
                     <el-form-item label="固定电话" prop="telPhoneNo">
                      <el-input v-model="certificateForm.telPhoneNo" type="text" size="small"></el-input>
                    </el-form-item>
                     <el-form-item label="Email" prop="email">
                      <el-input v-model="certificateForm.email" type="text" size="small"></el-input>
                    </el-form-item>
                     <el-form-item label="地址" prop="contactAddress">
                      <el-input v-model="certificateForm.contactAddress" type="text" size="small"></el-input>
                    </el-form-item>
                     <div style="text-align: right; margin: 0">
                          <el-button size="mini" type="text" @click="certificate = false">取消</el-button>
                          <el-button type="primary" size="mini" @click="confirm('certificateForm')">提交</el-button>
                      </div>
                        <form method="POST" :action="certificateInfo.action" ref="form" target="_blank">
                          <input type="hidden" :value="certificateInfo.ipsRequest"  name="ipsRequest">
                        </form>
         </el-form>
// 样式有点丑,将就点看哈

表单验证

  public banlance: string;
    public certificatePopver: boolean = false;
    public certificateStatus: boolean = false; //认证状态
    public flag = 0;
    certificateForm = {
      userName: "",
      mobilePhoneNo: "",
      identityNo: "",
      telPhoneNo: "",
      email: "",
      contactAddress: ""
    };
    certificateRule = {
      userName: [{
          required: true,
          message: "企业名称是必填的",
          trigger: "blur"
        },
        {
          min: 2,
          max: 20,
          message: "长度为2到20个字符",
          trigger: "blur"
        }
      ],
      mobilePhoneNo: [{
          required: true,
          message: "个人手机号码是必填的",
          trigger: "blur"
        },
        {
          validator: this.checkPhone,
          trigger: "blur"
        }
      ],
      identityNo: [{
        required: true,
        message: "营业执照证件号码是必填的",
        trigger: "blur"
      }],
      // 验证电话
      telPhoneNo: [{
          validator: this.checkTel,
          trigger: "blur"
        },
        {
          required: false
        }
      ],
      email: [{
          type: "email",
          message: "请输入正确的邮箱地址,否则置空",
          trigger: "blur"
        },
        {
          required: false
        }
      ]
    };
    certificateInfo = {
      action: "",
      ipsRequest: ""
    };
    // 验证手机
    checkPhone(rule, value, callback) {
      let isTel: boolean = false;
      const telReg = /^[1][3,4,5,7,8][0-9]{9}$/;
      isTel = telReg.test(value);
      if (!isTel) {
        isTel = false;
        callback(new Error("请检查要输入的手机号码是否合法"));
      } else {
        isTel = true;
      }
      callback();
    }
    // 判断电话格式
    checkTel(rule, value, callback) {
      let isTel: boolean = false;
      const telReg = /^0\d{2,3}-\d{7,8}$/;
      isTel = telReg.test(value);
      if (value === "") {
        isTel = true;
      }
      if (!isTel) {
        isTel = false;
        callback(new Error("请输入合法的电话,如021-×××,否则置空"));
      } else {
        isTel = true;
        callback();
      }
    }
 
    // 表单认证
    confirm(formName) {
      let el: any = this.$refs[formName];
      el.validate(valid => {
        if (valid) {
          userCertificate(
            this.certificateForm,
            res => {
              const {
                status,
                msg,
                data
              } = res;
              if (status === 200) {
                this.$message.success("提交成功");
                this.certificateInfo.action = data.action;
                this.certificateInfo.ipsRequest = data.ipsRequest;
                this.certificatePopver = false;
               // 提交成功之后再以原生的方式提交表单
                let form: any = this.$refs["form"];
                form.action = data.action;
                form.childNodes[0].name = "ipsRequest";
                form.childNodes[0].value = data.ipsRequest;
                // debugger
                form.submit();
              } else {
                this.$message.error(msg);
              }
            },
            err => {}
          );
        }
      });
    }
    mounted(): void {
      this.getBanlance();
      this.getCertificateStatus();
    }
    pageInit() {}
  }