端口号校验需结合正则预筛与数值判断：先用/^[1-9]\d{0,4}$|^0$/过滤字符串格式，再用Number()转数字并校验≤65535；oninput实时拦截优于onblur；前后端均须校验，前端仅提升体验。
端口号正则校验不能只靠 pattern 属性
HTML 原生的 input[type="number"] 不支持正则，而 input[type="text"] 虽能用 pattern，但浏览器只在表单提交时触发校验，且不阻止非法字符输入（比如用户粘贴 65536 或 -1，pattern 无法实时拦截）。真正可控的校验必须结合 JavaScript。
oninput + 正则实时过滤比 onblur 更可靠
端口号范围是 0–65535，但语义上 0 通常不用于服务端口，常见有效范围是 1–65535。正则本身不能表达“数值大小”，所以得先用正则筛掉非数字、前导零、空字符串，再转成数字判断范围。
推荐做法：
- 用
/^[1-9]\d{0,4}$|^0$/匹配合法字符串形式（允许0，但排除01、00等） - 在
oninput中执行：先用正则测试，不匹配就清空或还原上一值；匹配后再转Number判断是否 ≤65535 - 避免用
onchange或onblur，它们不响应每次按键，用户可能输完70000再失焦才报错，体验割裂
示例片段：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
<input type="text" id="port" oninput="validatePort(this)">
<script>
function validatePort(el) {
const v = el.value;
if (!/^[1-9]\d{0,4}$|^0$/.test(v)) {
el.value = el.dataset.last || '';
return;
}
const num = Number(v);
if (num > 65535) {
el.value = el.dataset.last || '';
return;
}
el.dataset.last = v;
}
</script>
注意 parseInt 和 Number 的差异
对用户输入，Number('00') 得 0，但 parseInt('00') 也得 0 —— 表面一样，但关键区别在容错性：parseInt('00a') 返回 0（静默截断），Number('00a') 返回 NaN。而我们已用正则提前过滤了非数字字符，所以两者都安全；但若跳过正则直接转数字，parseInt 可能掩盖错误（比如用户输 3000abc，parseInt 返回 3000，误判为合法）。
因此建议顺序固定：
- 正则预筛字符串格式（含前导零、长度、空值）
- 再用
Number()转换并比大小 - 不用
parseInt(val, 10)，除非你明确需要容忍后缀乱码
服务端仍需重复校验，前端只是体验层
任何前端校验都可被绕过：禁用 JS、手动改 DOM、curl 直发请求。所以 pattern 或 oninput 只是提升交互反馈，后端收到 port 参数时，必须再次执行相同逻辑（正则 + 数值范围检查），否则会埋下安全或运行时错误隐患。
容易忽略的一点：65535 是 uint16 最大值，但某些系统（如 Linux 非特权端口默认从 1024 起）对“可用端口”有额外策略。前端校验只需守住数学边界，业务规则（如“仅允许 8000–9999”）应由后端控制并返回明确错误码，前端只负责把用户输入约束在基础合法范围内。
