html的max属性仅对number、date等数值/时间类型生效，text类输入中会被忽略；需配合type="number"、step及服务端校验，并用javascript监听change/blur事件补漏。
HTML原生max属性只对数字和日期类型生效
很多人给text或email字段加max="10"，发现完全没校验效果——因为max是语义化约束，浏览器只在type="number"、type="date"、type="datetime-local"等支持数值/时间比较的类型上触发。对text类输入，它会被忽略，连控制台警告都不会有。
实操建议：
- 确认输入类型：用
<input type="number" max="100">而非type="text" - 注意
max值必须是数字字符串（如"99.5"），不能带单位或逗号 - 配合
step使用更可靠，比如step="0.1"时max="10.5"才有效 - 移动端键盘会自动适配：iOS Safari 对
type="number"弹出数字键盘，但部分安卓浏览器仍可能弹出全键盘
maxlength和max别混用
maxlength管字符长度（适用于text、textarea），max管数值大小（仅限数值/日期类型）。写错就等于没校验。
常见错误现象：
-
<input type="text" max="5">→ 无任何限制，输入"100000"也通过 -
<input type="number" maxlength="5">→ 浏览器忽略maxlength，不报错也不生效 - 想限制手机号11位？必须用
<input type="tel" maxlength="11">，不是max
JavaScript补漏时别只依赖input事件
原生max只在表单提交或调用checkValidity()时触发。用户输入超限后继续操作，界面不会实时反馈——得靠JS监听并干预。
实操建议：
- 监听
input事件不如监听change+blur组合，避免过度触发 - 获取值后手动转成数字再比对：
const val = Number(input.value); if (val > 100) {...} - 注意
Number("")是0，空值要单独判断：if (input.value === "" || val > 100) - 修改值后调用
input.setCustomValidity("不能超过100")才能让checkValidity()返回false
服务端永远要重复校验max逻辑
前端校验纯属体验优化，绕过太容易：禁用JS、改DOM、直接发POST请求……所有max限制在服务端必须重新实现。
关键点：
- 不要只校验“是否数字”，必须校验“是否≤指定最大值”
- 注意类型转换陷阱：PHP的
$_POST["age"]可能是字符串，Python的request.form.get("price")也是字符串，得先转浮点/整型再比对 - 数据库字段的
CHECK约束（如CHECK (score ）是最后一道防线，但不能替代应用层校验
最常被忽略的是小数精度问题：前端设max="99.99"，后端用float解析可能变成99.99000000000001，导致合法输入被拒。稳妥做法是用decimal类型或字符串解析后截断两位小数再比较。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
