表单校验方式（手机号，固定电话，邮箱，营业执照，银行卡号）

最近在做后台的用户信息整理，要用到一些表单校验，在之前没有处理过营业执照这种的表单校验，正好借此机会整理一下，欢迎大佬们提出宝贵意见。

表单引入：

<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;}
},

表单校验方式（手机号，固定电话，邮箱，营业执照，银行卡号）相关推荐

vue+element ui表单校验（邮箱、电话、工商信息）
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...
泛微移动表单校验手机号跟邮箱
泛微移动表单校验手机号跟邮箱 var iphoneVal = $f("phone").val();//获取表单字段 var checkIphone = /(\+\d+)?1[345 ...
struts2学习之表单校验的两种方式
基于覆盖validate方法的表单校验 Action类一般都继承ActionSupport类. 通过覆盖ActionSupport类的validate方法即可在自己的Action类中校验输入项的值. ...
表单校验之---校验姓名/护照正则/台湾往来通行证/校验身份证号/港澳往来通行证正则/军官证正则/检验手机号/校验银行卡号
常用表单校验 1.校验姓名 2.护照正则 3.台湾往来通行证 4.校验身份证号 5.港澳往来通行证正则 6.军官证正则 7.检验手机号 ...
HTML表单校验非空的两种方式
HTML表单校验非空的两种方式第一种方式第二种方式实例:校验表单中姓名为非空第一种方式 let reg = /\S/; 第二种方式 let reg_name = /^\w+$/; 实例:校验表 ...
【前端2】js：原始类型，运算符，调试，页面加载，轮播图，Bom（对象，时钟），Dom（全选全不选，省市级联，隔行/触摸换色，表单校验）
文章目录 1.js两种引入:js最终要引入到html在浏览器中运行 2.js五大原始类型:undefined 3.js的运算符和流程控制:js不支持单&和单|性能低 4.案例_99乘法表:So ...
blur表单验证方式
表单验证方式 * 思路:* 1 给每个input添加失去焦点事件,输入完毕后进行校验* 校验给错误提示 * 2. 表单提交数据的时候进行判断 * 是否有错误信息提示如果有,不能提交数据 <b ...
vant Weapp版本没有自带表单校验
自己实现一个简单的rules-form工具类在utils文件下创建rules-form.js // 表单校验 /*** 规则* rules: {* name: [* {required: true, ...
Element-ui Form表单校验-兜底校验-自定义检验规则
用户登录表单-数据双向绑定 <template><div class="form-container"><el-form label-width=&q ...

表单校验方式（手机号，固定电话，邮箱，营业执照，银行卡号）

表单校验方式（手机号，固定电话，邮箱，营业执照，银行卡号）相关推荐

最新文章

热门文章