HTML input设置maxlength属性后初始有效性验证不生效问题分析

这是HTML原生表单校验的标准设计行为，核心原因如下：

• 规范定义：WHATWG的HTML标准明确规定，maxlength对应的tooLong有效性校验标记，仅在用户对输入框执行过编辑操作后才会激活。浏览器默认判定开发者通过value属性设置的初始值为预期合法值，不会主动对初始值做maxlength长度校验，因此初始调用checkValidity()不会返回false，也不会触发input:invalid样式。
• 交互逻辑设计：maxlength本身自带输入拦截特性，用户手动输入时无法键入超过长度限制的内容，只有两种场景会出现输入框值超长：一是开发者主动设置了超长初始值，二是通过JS动态修改value为超长内容，这两类非用户输入的场景下，浏览器默认跳过maxlength校验，直到用户主动编辑输入内容后才会触发校验逻辑。
• 兼容处理方案：如果需要在初始化阶段就校验maxlength的超长情况，可以在页面加载完成后主动调用一次inputEl.reportValidity()，或是手动判断inputEl.value.length是否超过inputEl.maxLength，符合超长条件时调用inputEl.setCustomValidity('内容超过长度限制')手动标记校验状态即可。

内容的提问来源于stack exchange，提问作者Ssh-uunen