minlength仅对text、email、password等文本类input生效,number和date类型会忽略;必须搭配required才触发校验;原生校验仅在提交时检查,实时限制需JS监听input事件截断;后端必须重复校验。
minlength只对文本类input生效,number和date类型会忽略
给 type="number" 或 type="date" 加 minlength 是无效的。浏览器直接跳过该属性,既不报错也不校验——因为 minlength 检查的是字符串 UTF-16 长度,而数字输入框的 DOM 值可能是空字符串或 NaN,根本进不了长度校验逻辑。
常见错误: 看似写了,用户输一个 1 也能提交成功。
- 有效类型:
text、email、password、search、tel、url和textarea - 无效类型:
number、date、datetime-local、month、week、hidden - 移动端注意:iOS Safari 10.3+ 才支持,旧版(如 iOS 9)静默降级,必须用 JS 回退
必须搭配required,否则空值不会触发tooShort校验
minlength 不是独立生效的约束。如果字段没加 required,用户留空时浏览器优先触发 valueMissing 错误;即使填了 2 个字符但 minlength="5",也不会显示 “too short” 提示。
原因在于 Constraint Validation API 的错误优先级:空值 > 长度不足 > 格式错误。
立即学习“前端免费学习笔记(深入)”;
- ✅ 正确写法:
- ❌ 无效写法:
(用户输 1 字或留空都不拦) - 若字段可选但仍有最小长度要求,得用 JS 监听
input事件手动判断el.value.length < 5 && el.value !== "",再调用setCustomValidity()
原生校验只在提交时触发,实时截断得靠JavaScript
minlength 不阻止粘贴、不拦截键盘输入、不自动删超长内容——它只在 form.submit() 或 el.reportValidity() 时检查当前值是否达标。用户完全可以粘贴 100 字再点提交,此时才弹提示。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
想真正“不能输超过 5 个字”,必须监听 input 事件并主动截断:
const el = document.getElementById('limited');
el.addEventListener('input', () => {
if (el.value.length > 5) {
el.value = el.value.slice(0, 5);
}
});
- 用
input而非keydown:覆盖粘贴、拖拽、语音输入、IME 上屏等所有修改方式 - 用
slice(0, N)而非substring(0, N):避免负索引异常 - 中文输入法下,
event.isComposing为true时暂不截断,防止打断拼音组词
后端必须重复校验,前端限制全是装饰
所有前端长度控制——无论是 minlength、maxlength 还是 JS 截断——都能被轻易绕过:禁用 JS、用 curl 提交、DevTools 改 DOM、抓包重放……只要后端没做校验,就等于没设防。
数据库字段定义(如 MySQL VARCHAR(16))才是最终防线;服务端收到数据后,必须用语言原生方式重新计算长度(注意:JS 的 .length 对 emoji 或代理对可能出错,Python/Java 更可靠)。
最容易被忽略的一点:当 JS 截断后,如果用户没再触发 input 事件(比如粘贴后直接失焦),表单可能带着被截断的值提交,而后端若只依赖前端传来的“原始长度”字段,就会漏掉这个变化。所以后端永远以实际接收到的字符串为准,而不是信任任何前端传来的 length 数值。