HTML表单怎么校验Mac地址格式-html教程-PHP中文网

mac地址需用pattern正则校验，推荐^([0-9a-fa-f]{2}[:-]){5}[0-9a-fa-f]{2}$，配合trim()、大小写转换及业务规则（如排除全零/广播地址）和后端双重验证。

html表单怎么校验mac地址格式

input[type="text"] 无法原生校验 MAC 地址，浏览器没有 type="mac" 这种类型。必须靠 pattern 属性 + 正则，或 JavaScript 手动干预。

用 `pattern` 做基础前端拦截

这是最轻量、最符合 HTML5 原生验证逻辑的做法，但要注意正则写法和浏览器行为边界：

pattern 只在表单提交时触发，不监听输入过程；用户可一直乱输，直到点提交才报错
正则必须严格匹配整个字符串，不能只写片段；推荐用：^([0-9A-Fa-f]{2}[:-]){5}[0-9A-Fa-f]{2}$
不要加 g 或 m 标志——pattern 内部自动做全局/多行处理，加了反而失效
冒号和连字符不能混用，所以 00:1A-2B:3C-4D:5E 会被拒绝，这是对的，不是 bug
示例写法：<input type="text" name="mac" pattern="^([0-9A-Fa-f]{2}[:-]){5}[0-9A-Fa-f]{2}$" title="请输入合法MAC地址，如 00:1A:2B:3C:4D:5E">

JavaScript 补位：解决 `pattern` 漏掉的常见坑

pattern 对大小写不敏感（浏览器自动转小写再匹配），但它拦不住这些真实场景问题：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

用户粘贴带首尾空格的 MAC（如 " 00:1A:2B:3C:4D:5E "）→ 提交前必须 .trim()
全零地址（00:00:00:00:00:00）或广播地址（FF:FF:FF:FF:FF:FF）虽格式合法，但业务上通常无效 → 需额外判断
虚拟网卡地址（如 VMware 的 00:0C:29.*、VirtualBox 的 08:00:27.*）是否允许，得看后端策略，前端最多 warn
建议在 submit 事件里统一处理：const mac = input.value.trim().toUpperCase(); if (/^([0-9A-F]{2}:){5}[0-9A-F]{2}$/.test(mac) && mac !== '00:00:00:00:00:00' && mac !== 'FF:FF:FF:FF:FF:FF') { /* 通过 */ }