本文总结在项目前端开发中常用的表单校验正则表达式，并基于Vue3框架和ElementPlus下form表单组件，给出正则公共组件封装与使用步骤，有利于全局正则校验规则维护和复杂项目多人协同开发使用。

常用表单校验正则表达式汇总

//  常用名称：支持中英文、数字，长度1-20位
const nameRule = /^([0-9]|[a-zA-Z]|[\u4e00-\u9fa5]){1,20}$/;

//  支持大小写字母和数字，不支持数字开头，长度10位
const nameRule = /^[a-zA-Z][0-9]{9}$/;

//  只能输入正整数或为空：
const positiveIntRule = /^$|^[1-9]\d*$/;

//  常用手机号：
const phoneRule = /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/;

//  身份证18位：
const idCardRule = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/;

//  常用邮箱：
const emailRule =  /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+.([a-zA-Z0-9]{2,4})$/;

//  日期校验：如2023-05-29
const dateRule =  /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;

//  密码强度校验：必须包括2位数字、大小写和特殊字符，长度6-16位
//  断言：(?=表达式)
const passwordRule = /^.*(?=.{8,16})(?=.*\d{2,})(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#&*%$\?^ ]).*$/;

//  ipv4地址合法校验：如192.168.0.1
//  25[0-5]:250-255;  2[0-4][0-9]:200-249;  [01]?[0-9][0-9]:0-199
const ipv4Rule = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;

//  ipv4 CIDR 合法校验：如192.168.0.0/24
const ipv4CidrRule = /^(?:(?:[0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}(?:[0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\/([1-9]|[1-2]\d|3[0-2])$/;

//  ipv6地址合法校验：如fe80:0000:0000:0000:0204:61ff:fe9d:f156
const ipv6Rule = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/;

Vue3中正则校验规则封装与使用步骤

1. 封装常用正则表达式的公共组件regExp.ts：

// 常用名称校验：支持中英文、数字，长度1-20位
export const nameRule = /^([0-9]|[a-zA-Z]|[\u4e00-\u9fa5]){1,20}$/;

2. 封装常用表单校验规则的公共组件validate.ts：

import { nameRule } from "./regExp"

export function checkName(rule: any, value: string, callback: any) {
    if (!nameRule.test(value)) {
        callback(new Error("请输入正确的名称格式"));
    } else {
        return callback();
    }

3. 在业务文件中引入所需校验规则：

import { checkName } from '@/util/validate'

4. 在表单所需处使用该校验规则：

rules: { 
    validate: [ 
        { 
            required: true,
            message: '请填写名称，不可为空', 
            trigger: ['change', 'blur'] 
        }, 
        { 
            validator: checkName,
            trigger: ['change', 'blur'] 
        }
    ] 
}