先看案例🤓🤓?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到13callback(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 項目 表單校驗注意點

?

?

總結

以上是生活随笔為你收集整理的vue element 项目 表单校验 保姆级教程 纳税人识别号 公司电话传真 银行卡校验（包含注意点）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。