HTML5表单通过maxLength和minLength属性触发tooLong、tooShort验证，其值按Unicode码点计算；通过element.validity.tooLong/tooShort布尔属性实时获取状态。
HTML5 表单原生提供了 tooLong 和 tooShort 这两个验证状态，它们不是手动设置的布尔值，而是浏览器根据元素属性自动计算出的 validity 对象属性。判断和处理的关键在于：**绑定属性 + 监听验证状态 + 读取 validity 对象**。
设置基础属性触发验证逻辑
浏览器只有看到对应属性，才会启用相关校验：
-
tooLong：必须在 input 或 textarea 上设置
maxLength（注意是小写 L），例如：<input type="text" maxlength="100"> -
tooShort：必须设置
minLength（同样小写 L），例如：<input type="text" minlength="5"> - 这两个属性都按 Unicode 码点计数，中文、英文、数字各算 1 个字符；emoji 若为代理对（如 ?），会被计为 2 个码点
通过 validity 对象实时判断状态
每个表单控件都有 element.validity 对象，其中包含 tooLong 和 tooShort 布尔属性：
- 当输入值长度 >
maxLength时，validity.tooLong === true - 当输入值长度 minLength 且字段非空时，
validity.tooShort === true - 注意：
tooShort不会在值为空时触发（空值由valueMissing负责） - 可结合
checkValidity()主动触发验证，或监听input、blur事件读取
常见处理方式（不依赖 JS 截断，专注反馈与交互）
原生验证更适合做“提示”而非“强制干预”，推荐以下做法：
- 用
:valid/:invalidCSS 伪类控制边框、图标或背景色 - 在
input事件中检查：if (input.validity.tooLong) { showTip('不能超过100字'); } - 提交前统一校验：
form.checkValidity()返回 false 时阻止提交，并遍历所有字段高亮问题项 - 避免用 JS 修改 value 来“修复”长度（如
el.value = el.value.slice(0,100)），这会打断用户输入节奏、影响光标位置，且绕过原生验证逻辑
特殊情况兼容补充
原生属性在部分场景下可能失效，需额外处理：
- 粘贴大段文本时，
maxLength通常仍生效，但若通过el.value = 'xxx'赋值，可能突破限制 → 此时应监听input并主动调用checkValidity() - 旧版浏览器（如 IE）不支持
minLength/maxLength→ 需用 JS 模拟校验逻辑 - 服务端仍需二次校验：前端限制可被绕过，
tooLong/tooShort仅用于用户体验优化
