vue element 项目 表单校验 保姆级教程 纳税人识别号 公司电话传真 银行卡校验（包含注意点）

先看案例🤓🤓 vue element 项目 给表单加上校验规则

手机号和邮箱校验 请点击链接调整往期文章vue+element项目 手机号、邮箱校验 保姆级教程https://blog.csdn.net/qq_44224811/article/details/127908134?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167029307416800182186257%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=167029307416800182186257&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-127908134-null-null.nonecase&utm_term=%E6%A0%A1%E9%AA%8C&spm=1018.2226.3001.4450

🤩🤩注意点（蓝色框框起来的 prop 一定要有哈~）

表单校验如下🧐🧐

<el-form ref="addInvoiceFormRef" :model="addInvoiceForm" :rules="rules" label-width="120px">
        <el-form-item label="纳税人识别号" prop="identifyNumber">
          <el-input v-model="addInvoiceForm.identifyNumber"></el-input>
        </el-form-item>
        <el-form-item label="开户银行账户" prop="bankAccount">
          <el-input v-model="addInvoiceForm.bankAccount"></el-input>
        </el-form-item>
        <el-form-item label="公司电话/传真" prop="phone">
          <el-input v-model="addInvoiceForm.phone"></el-input>
        </el-form-item>
        <el-form-item class="adiol">
          <el-button type="primary" @click="add()">立即创建</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>

    /* 纳税人识别号 */
    var isidentifyNumber = (rule, value, callback) => {
      if (!value) {
        callback();
      } else {
        const reg =
          /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/;
        const identifyNumber = reg.test(value);
        if (!identifyNumber) {
          callback(new Error("填写正确纳税人识别号"));
        } else {
          callback();
        }
      }
    };
    /* 公司电话/传真 */
    var isTelOrFax = (rule, value, callback) => {
      if (!value) {
        callback();
      } else {
        const reg = /^(\d{3,4}-)?\d{7,8}$/;
        const isTel = reg.test(value);
        if (value.length < 10 || value.length > 13 || !isTel) {
          //  判断传真字符范围是在10到13
          callback(new Error("座机或传真格式如:0376-1234567"));
        } else {
          callback();
        }
      }
    };
    /* 银行卡校验 */
    var isbankAccount = (rule, value, callback) => {
      const strBin =
        "10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";
      if (!value) {
        return callback(new Error("收款账户不能为空"));
      } else if (!Number.isInteger(+value)) {
        callback(new Error("银行卡号必须全为数字"));
      } else if (value.trim().length < 12 || value.trim().length > 19) {
        callback(new Error("银行卡号长度必须在12到19之间"));
      } else if (strBin.indexOf(value.substring(0, 2)) === -1) {
        callback(new Error("银行卡号开头6位不符合规范"));
      } else {
        callback();
      }
    };

  /* 校验规则 */
      rules: {
        /* 开户银行账户账号 */
        bankAccount: [
          { required: true, message: "请输入正确的银行账户", trigger: "blur" },
          { validator: isbankAccount, trigger: "blur" },
        ],
        /* 纳税人识别号 */
        identifyNumber: [
          {
            required: true,
            message: "请输入正确的纳税人识别号",
            trigger: "blur",
          },
          { validator: isidentifyNumber, trigger: "blur" },
        ],
        /* 公司电话/传真 */
        phone: [
          { required: true, message: "请输入座机号", trigger: "blur" },
          { validator: isTelOrFax, trigger: "blur" },
        ],
      },

校验完提交表单

  /* 添加功能的规则校验 */
    async add() {
      this.$refs.addInvoiceFormRef.validate((valid) => {
        if (!valid) return;
        this.handleSubmit();
      });
    },
    // 编辑 添加
    async handleSubmit() {
      /* 点击按钮判断是否有id 没id走添加接口 */
      /* if (!this.addInvoiceForm.id) 这样也可 */
      if (!this.addInvoiceForm.id) {
        console.log(this.addInvoiceForm.id, "id");
        /* addInvoiceInfo为接口 */
        const result = await addInvoiceInfo(this.addInvoiceForm);
        if (result.code === 200) {
          /* 添加完置空表单 */
          this.addInvoiceForm = {
            bank: "",
            bankAccount: "",
            email: "",
            identifyNumber: "",
            phone: "",
            registerAddress: "",
            title: "",
            id: "",
            type: "ELECTRONIC",
          };
          this.$message.success("添加成功");
          this.addInvoiceDialogVisible = false;
          /* 添加完再次渲染表格 */
          this.getInfoList();
        } else {
          this.$message("添加失败");
        }
      } else {
        console.log(this.addInvoiceForm.id, "id");
        const result = await editInvoiceInfo(this.addInvoiceForm);
        console.log(result);
        if (result.code === 200) {
          this.addInvoiceDialogVisible = false;
          this.$message.success("编辑成功");
          this.getInfoList();
        } else {
          this.$message("编辑失败");
        }
      }
      /* 添加编辑完置空表单 */
      this.addInvoiceForm = {
        bank: "",
        bankAccount: "",
        email: "",
        identifyNumber: "",
        phone: "",
        registerAddress: "",
        title: "",
        type: "ELECTRONIC",
        id: "",
      };
    },

温馨提示：如果以上方法尝试过了，问题还没解决的朋友，如果您不嫌弃，欢迎评论或者私信联系，我会第一时间与您取得联系，和您一起探讨解决问题！绝不收取任何咨询费用！

关键词搜索优化（与文章无关）：vue element 项目 表单校验 保姆级教程 纳税人识别号 公司电话传真 银行卡校验（包含注意点）vue element 项目 表单校验无效 vue element 项目 表单校验注意点