Vue 3 中验证 MAC 地址需格式校验（12位十六进制、统一分隔符）与语义校验（每段0–255、排除多播/广播），推荐用自定义 validator 实现，兼顾准确性与可维护性。
Vue 3 中验证 MAC 地址合法性，核心是结合格式校验 + 语义校验，不能只靠正则“看起来像”。实际项目中推荐用自定义校验器（validator）配合标准规则，兼顾可读性、可复用性和准确性。
基础格式校验（必做）
先确保字符串符合 MAC 地址的通用书写规范：12 位十六进制字符，分隔符为 :、- 或无分隔。Element Plus 的 el-form-item 支持 pattern，但更稳妥的是用 validator 统一处理：
- 去除首尾空格，统一替换分隔符（冒号、短横、点、空格）为空字符串
- 检查剩余字符串长度是否为 12
- 逐段切分为 6 组，每组转为整数（
parseInt(x, 16)），确认是否在0x00到0xFF范围内
OUI 厂商前缀初筛（可选增强）
提取前 6 个字符（即前 3 字节，如 "acde48"），查 IEEE OUI 数据库可辅助识别明显伪造地址。实践中可：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 本地缓存常用 OUI 前缀（如
"00:1A:2B"、"B8:27:EB"），快速白名单放行 - 或调用公开 API（如
https://api.macvendors.com/AC:DE:48），但注意网络依赖和限流 - 不建议在表单提交时实时请求——应作为后台补充校验，前端仅作提示性标记（如“厂商未知”）
广播与多播地址识别（按需排除）
某些业务场景（如设备绑定）需排除特殊地址：
立即学习“前端免费学习笔记（深入）”；
- 取第一组十六进制值（如
"01"），转二进制后看最低位（bit 0）：为1即多播（如01:00:5E:xx:xx:xx） - 全为
"FF"（即FF:FF:FF:FF:FF:FF）是广播地址，应拒绝 - 该判断应在格式校验通过后执行，避免对非法输入做无效解析
Vue 3 + Element Plus 完整写法示例
在 rules 中定义校验器，注意三者字段名必须一致：prop="gatewayMac"、dataForm.gatewayMac、rules.gatewayMac：
const validateMacAddr = (_rule: unknown, value: string, callback: (err?: Error) => void) => {
if (!value || !value.trim()) return callback(new Error('MAC 地址不能为空'))
<p>const clean = value.trim().replace(/[:-. ]/g, '').toUpperCase()
if (clean.length !== 12) return callback(new Error('长度应为 12 位十六进制字符'))</p><p>for (let i = 0; i < 6; i++) {
const seg = clean.slice(i <em> 2, i </em> 2 + 2)
const num = parseInt(seg, 16)
if (isNaN(num) || num < 0 || num > 255) {
return callback(new Error('包含非法十六进制字符'))
}
}</p><p>// 可选：检查多播位（bit 0）
const firstByte = parseInt(clean.slice(0, 2), 16)
if ((firstByte & 1) === 1) {
return callback(new Error('不支持多播或广播地址'))
}</p><p>callback()
}</p><p>const rules = ref({
gatewayMac: [
{ required: true, message: '必填项', trigger: 'blur' },
{ validator: validateMacAddr, trigger: 'blur' }
]
})
