最近在做后臺的用戶信息整理，要用到一些表單校驗，在之前沒有處理過營業執照這種的表單校驗，正好借此機會整理一下，歡迎大佬們提出寶貴意見。

表單引入：

<FormItem label="聯系人手機" prop="liaisonPhoneNumber"><Input v-model.trim="newForm.liaisonPhoneNumber" clearable placeholder="請輸入聯系人手機"></Input> </FormItem> <FormItem label="固定電話" prop="fixedPhone"><Input v-model.trim="newForm.fixedPhone" clearable placeholder="請輸入固定電話"></Input> </FormItem> <FormItem label="電子郵箱" prop="email"><Input v-model.trim="newForm.email" clearable placeholder="請輸入電子郵箱"></Input> </FormItem> <FormItem label="營業執照" prop="businessLicenseNum"> <Input v-model.trim="newForm.businessLicenseNum" clearable placeholder="請輸入營業執照" @keyup.native="valueRegexOfN($event, 'businessLicenseNum')"></Input> </FormItem> <FormItem label="銀行賬號" prop="accCard"> <Input v-model.trim="newForm.accCard" clearable placeholder="請輸入銀行賬號" @on-keyup="(event) => formatBankNo('accCard', event)"></Input> </FormItem>

js表單驗證：

const validatePhone = (rule, value, callback) => {let regTest = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;if (!value) {callback(new Error("手機號碼不能為空"));} else {if (!regTest.test(value)) {callback(new Error("手機號碼格式不正確"));return;}callback();} }; const validatefixedPhone = (rule, value, callback) => {let regTest = /((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/;if (!value) {callback(new Error("固定電話不能為空"));} else {if (!regTest.test(value)) {callback(new Error("固定電話格式不正確"));return;}callback();} }; const validateEmail = (rule, value, callback) => {let regTest = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;if (!value) {callback(new Error("郵箱不能為空"));} else {if (!regTest.test(value)) {callback(new Error("電子郵箱格式不正確"));return;}callback();} }; const validateBusiness = (rule, value, callback) => {var patrn = /^[0-9A-Z]+$/;//18位校驗及大寫校驗if ((value.length != 18) || (patrn.test(value) == false)) {callback(new Error("營業執照格式不正確"));} else {var Ancode;//統一社會信用代碼的每一個值var Ancodevalue;//統一社會信用代碼每一個值的權重var total = 0;var weightedfactors = [1, 3, 9, 27, 19, 26, 16, 17, 20, 29, 25, 13, 8, 24, 10, 30, 28];//加權因子var str = '0123456789ABCDEFGHJKLMNPQRTUWXY';//不用I、O、S、V、Zfor (var i = 0; i < value.length - 1; i++) {Ancode = value.substring(i, i + 1);Ancodevalue = str.indexOf(Ancode);total = total + Ancodevalue * weightedfactors[i];//權重與加權因子相乘之和}var logiccheckcode = 31 - total % 31;if (logiccheckcode == 31) {logiccheckcode = 0;}var Str = "0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,J,K,L,M,N,P,Q,R,T,U,W,X,Y";var Array_Str = Str.split(',');logiccheckcode = Array_Str[logiccheckcode];var checkcode = value.substring(17, 18);if (logiccheckcode != checkcode) {callback(new Error("營業執照格式不正確"));} else {callback();}} }; const validateAccCard = (rule, value, callback) => {let regTest16 = /^.{19}$/;let regTest19 = /^.{23}$/;if (!value) {callback(new Error("請輸入銀行卡號"));} else {if (regTest16.test(value) || regTest19.test(value)) {callback();} else {callback("銀行卡號格式不正確");}callback();} };

data中定義規則：

formRules: {liaisonPhoneNumber: [{ required: true, validator: validatePhone, trigger: "blur" }],fixedPhone: [{ required: true, validator: validatefixedPhone, trigger: "blur", }],email: [{ required: true, validator: validateEmail, trigger: "blur", }],businessLicenseNum: [{ required: true, validator: validateBusiness, trigger: "blur" }],accCard: [{ required: true, validator: validateAccCard, trigger: "blur" }], },

另外營業執照和銀行卡號用到的輸入框的方法：

//中英文、數字 valueRegexOfN(e, key) {const o = e.target;o.value = o.value.replace(/[^0-9]+$/g, "").replace(/\s+/g, "");if (this.newForm) {this.newForm[key] = o.value;} },// 銀行卡號 formatBankNo (key, e){const o = e.target;if (o.value == "") return;var account = new String (o.value);account = account.substring(0,23); /*帳號的總數, 包括空格在內 */if (account.match (".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}") == null){/* 對照格式 */if (account.match (".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" + ".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" +".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" + ".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}") == null){var accountNumeric = "";var accountChar = "";for (var i=0;i<account.length;i++){accountChar = account.substr (i,1);if (!isNaN (accountChar) && (accountChar != " ")) accountNumeric = accountNumeric + accountChar;}account = "";for (i=0;i<accountNumeric.length;i++){ /* 可將以下空格改為-,效果也不錯 */if (i == 4) account = account + " "; /* 帳號第四位數后加空格 */if (i == 8) account = account + " "; /* 帳號第八位數后加空格 */if (i == 12) account = account + " ";/* 帳號第十二位后數后加空格 */if (i == 16) account = account + " ";/* 帳號第十六位后數后加空格 */account = account + accountNumeric.substr (i,1)}}} else {account = " " + account.substring (1,5) + " " + account.substring (6,10) + " " + account.substring (14,18) + "-" + account.substring(18,25);}if (account != o.value) {o.value = account;this.newForm[key] = o.value;} },

總結

以上是生活随笔為你收集整理的表单校验方式（手机号，固定电话，邮箱，营业执照，银行卡号）的全部內容，希望文章能夠幫你解決所遇到的問題。

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