封装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 =  /^((0\d{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'],
}],

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