封装Form表单正则校验--确认密码正则表达式

封装Form表单正则校验–确认密码正则表达式

为什么要封装：
一、因为我们在做项目的时候肯定不会只有一个页面用到这些Form表单的验证！
二、可以很方便的在多个页面中进行使用！
三、对以后系统升级维护更加方便快捷！

步骤一：
首先我们先创建一个js文件，我们暂时取名为regMatch.js
然后我们在这个js文件开始封装我们需要的Form表单的正则表达式
以下我们列举了一些常用到的正则表达式

/**
* 手机号码正则匹配
* @param {*} rule
* @param {*} value
* @param {*} callback
*/
export function phoneRule(rule, value, callback) {
if (!rule.required && !value) {
return callback();
}
if (!value) {
callback(new Error('请输入手机号码'))
} else {
const reg = /^1[3|4|5|6|7|8|9][0-9]d{8}$/
if (reg.test(value)) {
callback()
} else {
return callback(new Error('请输入正确的手机号码'))
}
}
}
/**
* 身份证号码正则匹配
* @param {*} rule
* @param {*} value
* @param {*} callback
*/
export function IDCardRule(rule, value, callback) {
// console.log("value", value)
if (!value) {
callback(new Error('请输入身份证号码'));
} else {
var city = {
11: "北京",
12: "天津",
13: "河北",
14: "山西",
15: "内蒙古",
21: "辽宁",
22: "吉林",
23: "黑龙江 ",
31: "上海",
32: "江苏",
33: "浙江",
34: "安徽",
35: "福建",
36: "江西",
37: "山东",
41: "河南",
42: "湖北 ",
43: "湖南",
44: "广东",
45: "广西",
46: "海南",
50: "重庆",
51: "四川",
52: "贵州",
53: "云南",
54: "西藏 ",
61: "陕西",
62: "甘肃",
63: "青海",
64: "宁夏",
65: "新疆",
71: "台湾",
81: "香港",
82: "澳门",
91: "国外 "
};
var tip = ""
var pass = true;
if (!value || !/^d{6}(18|19|20)?d{2}(0[1-9]|1[012])(0[1-9]|[12]d|3[01])d{3}(d|X)$/i.test(value)) {
tip = "身份证号码格式错误"
pass = false;
} else if (!city[value.substr(0, 2)]) {
// tip = "地址编码错误"
tip = "身份证号码输入错误"
pass = false
} else {
// 18位身份证需要验证最后一位校验位
if (value.length === 18) {
value = value.split('')
// ∑(ai×Wi)(mod 11)
// 加权因子
var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
// 校验位
var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
var sum = 0
var ai = 0
var wi = 0
for (var i = 0; i < 17; i++) {
ai = value[i]
wi = factor[i]
sum += ai * wi
}
var last = parity[sum % 11];
if (parity[sum % 11] != value[17]) {
// tip = "校验位错误"
tip = "身份证号码输入错误"
pass = false
}
}
}
if (!pass) {
callback(new Error(tip))
} else {
callback()
}
}
}
/**
* 邮政编码正则匹配
* @param {*} rule
* @param {*} value
* @param {*} callback
*/
export function postCodeRule(rule, value, callback) {
if (!rule.required && !value) {
return callback();
}
if (!value) {
callback(new Error('请输入邮政编码'));
} else {
const reg = /^[1-9]d{5}$/;
// console.log(reg.test(value));
if (reg.test(value) || value == '000000') {
callback();
} else {
return callback(new Error('请输入正确的邮政编码'));
}
}
}
/**
* 统一社会信用代码正则匹配
* @param {*} rule
* @param {*} value
* @param {*} callback
*/
export function uniformCodeRule(rule, value, callback) {
if (!value) {
callback(new Error('请输入统一社会信用代码'));
} else {
const reg = /^([0-9A-HJ-NPQRTUWXY]{2}d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]d{14})$/;
if (reg.test(value)) {
callback();
} else {
return callback(new Error('请输入正确的统一社会信用代码'));
}
}
}
/**
* 电子信箱正则匹配
* @param {*} rule
* @param {*} value
* @param {*} callback
*/
export function emailRule(rule, value, callback) {
if (!rule.required && !value) {
return callback();
}
if (!value) {
return callback(new Error('请输入电子邮箱'))
} else {
const reg = /^[a-zA-Z0-9._%+-]+@(?!.*...*)[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/
if (reg.test(value)) {
callback()
} else {
return callback(new Error('请输入正确的电子邮箱'))
}
}
}
/**
* 验证手机号和座机号的正则表达式
* @param {*} rule
* @param {*} value
* @param {*} callback
*/
export function IDCarduniformCodeRule(rule, value, callback) {
if (!rule.required && !value) {
return callback();
}
if (!value) {
callback(new Error('请输入证件号码'));
} else {
const reg =
/^((0d{2,3}-d{7,8})|1[3|4|5|6|7|8|9][0-9]d{8})$/;
const reg1 =
/^([0-9A-HJ-NPQRTUWXY]{2}d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]d{14})$/;
if (reg.test(value)||reg1.test(value)) {
callback();
} else {
return callback(new Error('请输入正确的证件号码'));
}
}
}

现在我们列举了一些常用的正则表达式，那么我们接下来就在页面中进行使用了

步骤二：在使用页面中我们第一步就要引入这个文件：

import { IDCarduniformCodeRule, emailRule, uniformCodeRule,postCodeRule,IDCardRule,phoneRule} from "@/utils/regMatch";

步骤三、然后我们在你:rules="formRules"中的firmRules里面进行使用了

linkmanPhone: [
{
required: true,
validator: phoneRule,
trigger: "blur",
},
],

接下来实现确认密码的正则表达式了

//银行卡正则
bankCode: [{
validator:bankCode,
required: true,
trigger: ['change', 'blur']
}],
//确认银行卡卡号
fixbankCode: [{
required: true,
message:"请确认银行卡卡号",
trigger: ['change', 'blur']
},
{
validator: (rule, value, callback) => {
return value === this.form.bankCode;
},
message: '两次输入的银行卡卡号不同',
trigger: ['change','blur'],
}],

进行到这就是一个完整的例子了，希望对你有所帮助！！！
如果帮助到你，请给我点个赞！

最后

以上就是想人陪乐曲为你收集整理的封装Form表单正则校验--确认密码正则表达式的全部内容，希望文章能够帮你解决封装Form表单正则校验--确认密码正则表达式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。