min/max属性仅对type="number"等语义化类型生效，type="text"时被浏览器完全忽略；需配合javascript实时监听input事件并用parsefloat转换校验，且服务端必须二次验证。
min 和 max 属性本身不拦截输入，只参与表单提交时的原生校验；真正限制数值范围必须显式使用 type="number"，并配合 JavaScript 实时监听与修正。
为什么 min/max 加在 type="text" 上完全无效
浏览器只对语义化类型（如 type="number"、type="date"）解析 min 和 max。写成 type="text" 或漏掉 type 属性，这两个值会被直接忽略——连 element.min 都读不到，更别说触发任何逻辑。
- 常见错误：
<input type="text" min="0" max="100">，输入 999 不报错、不截断、不灰显增减按钮 - 检查方法：打开控制台执行
document.querySelector('input').min，返回空字符串说明属性未被识别 - 修复动作：必须写成
<input type="number" min="0" max="100">，引号不能省，值必须是字符串（如"0"，不是0）
如何用 input 事件实时截断超限输入
原生 min/max 不阻止键盘粘贴或手动输入，input 事件是唯一能覆盖中间过程的时机。注意别用 change（只在失焦后触发），也别在 keydown 里 preventDefault()（会干掉退格、小数点等合法操作）。
- 核心逻辑：监听
input→ 用parseFloat(el.value)转数值 → 对比parseFloat(el.min)和parseFloat(el.max)→ 超限时直接赋值为边界 - 必须处理空值：
parseFloat("")返回NaN，需加isNaN(val)判断，否则val 会恒为 <code>false - 示例代码片段：
const el = document.querySelector('input[type="number"]');
el.addEventListener('input', () => {
const val = parseFloat(el.value);
if (isNaN(val)) return;
const min = parseFloat(el.min) || -Infinity;
const max = parseFloat(el.max) || Infinity;
if (val max) el.value = el.max;
});
step 不只是“步长”，它直接影响 min/max 是否生效
step 决定合法值序列的起点和间隔。若没设 min，默认从 0 开始；若 min="1" 但 step="2"，合法值是 1、3、5…，而不是 0、2、4…。用户输入 4 时，浏览器可能允许，但严格意义上它不在序列中。
- 常见坑：
min="1" max="10" step="2"下输入 4 不报错，但提交后某些校验库（如 Express Validator）可能拒绝——因为 4 不是1 + n×2的形式 - 修复建议：业务要求整数范围就写
step="1"；要支持小数必须显式写step="0.1"或step="any"，但后者会让增减按钮失效 - 移动端特别注意：
step="any"在 iOS Safari 中仍允许任意小数位输入，且不会自动对齐到最近合法值
服务端二次校验不是可选项，而是强制前提
前端所有限制都可被绕过：curl 直接 POST、开发者工具改 DOM、禁用 JS 后提交……后端收到的永远是原始请求体里的值。
- Node.js/Express 示例：不能只依赖
req.checkBody().isInt({ min: 0, max: 100 })这类封装，得自己写if (req.body.score 100) return res.status(400).send(...) - 数据库层也要加固：PostgreSQL 加
CHECK (score BETWEEN 0 AND 100)，MySQL 用tinyint CHECK (score >= 0 AND score - 最容易被忽略的一点：日期类型的
min/max是字符串字典序比较，min="2024-1-1"（少补零）会被当成大于"2024-01-01"，导致校验失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
