type="number"配合min/max才生效，且值须为合法数字字符串；需用step控制精度，并辅以js实时校验和服务端双重验证。
直接给 input 加 type="number"，再配上 min 和 max 属性就能起作用，但必须满足几个关键条件，否则看起来“没效果”。
必须是 type="number"，不能是 text
很多问题出在这里：min 和 max 只对 type="number"（以及 date、range 等）生效。写成 type="text" 或漏掉 type，浏览器完全忽略这两个属性。
- ✅ 正确：
<input type="number" min="0" max="100"> - ❌ 无效：
<input type="text" min="0" max="100">或<input min="0" max="100">
min/max 值必须是合法数字字符串
它们的值得用引号包住，写成纯数字格式，不带单位、逗号或中文符号。
- ✅ 正确：
min="5"、max="-10.5"、min="0.01" - ❌ 无效：
min=5（没引号）、min="5,000"（逗号）、min="5.000"（千分位点）、min="五"
要限制小数精度，得配合 step
min 和 max 只管边界，不管“能输哪些数”。比如 min="0" max="10"，用户仍可输入 3.14159——除非你加 step。
-
step="1"：只允许整数（0、1、2…10） -
step="0.5"：允许 0、0.5、1、1.5…10 -
step="any"：不限制小数位数，但依然受 min/max 约束
别只靠 HTML，得加 JS 和服务端校验
浏览器不会实时阻止键盘输入或粘贴超限值，只在提交或调用 checkValidity() 时提示错误。用户仍可能绕过。
- 监听
input事件，用el.valueAsNumber实时判断并修正 - 服务端必须重新检查范围，不能信任前端传来的任何值
- 数据库字段也建议加
CHECK约束（如 PostgreSQL 的CHECK (score BETWEEN 0 AND 100)）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
