html解析引擎仅构建dom树，表单验证由浏览器约束验证子系统动态执行；提交时遍历控件检查required（trim后为空）和pattern（隐式^$锚点），失败则阻止提交并提示；禁用js仍生效；setcustomvalidity设customerror状态并覆盖验证结果。
HTML解析引擎本身不“解析表单验证”——它只负责把HTML标记转成DOM树，而表单验证逻辑由浏览器的**表单约束验证子系统**（Constraint Validation API 实现层）在渲染后动态执行。
浏览器怎么触发 required 和 pattern 校验
当用户点击 <input type="submit"> 或调用 form.submit() 时，浏览器会同步执行以下动作：
- 遍历所有表单控件，检查是否设置了
required属性且值为空（注意：value.trim() === ""才算空，空格不算） - 对设置了
pattern的字段，用其正则字符串构造RegExp对象（隐式启用^和$锚点），再调用test(input.value) - 若任一控件校验失败，阻止提交，并调用内部
reportValidity()显示默认气泡提示 - 这个过程不依赖 JavaScript 是否启用——禁用 JS 后，
required和pattern依然生效
setCustomValidity() 怎么覆盖原生验证
该方法本质是修改 DOM 元素的 validity.customError 状态位，并设置 validationMessage。一旦你调用了 element.setCustomValidity("错误信息")，哪怕输入内容完全合法，element.checkValidity() 也会返回 false，直到你传入空字符串重置：
const pwd = document.querySelector('#password');
pwd.addEventListener('input', () => {
if (pwd.value.length
<p>常见坑：忘记清空、在非 input 事件里调用（比如只在 submit 里设，但用户没点提交就离开页面）、与 <code>required</code> 冲突导致提示被覆盖。</p>
<h3>为什么 <code>pattern</code> 对空值不校验</h3>
<p>这是 HTML5 规范明确规定的：只有当字段有值时，<code>pattern</code> 才参与匹配。所以如果你写：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;"><input type="text" pattern="[a-z]{3}">
用户留空也能通过验证。真正要“非空且符合格式”，必须显式加 required：
<input type="text" pattern="[a-z]{3}" required>
否则会出现“允许空、但填了就必须是三个小写字母”的语义，和业务预期不符。很多开发者卡在这里，以为 pattern 自带必填逻辑。
移动端 pattern 正则的兼容性陷阱
iOS Safari 和 Android Chrome 对 pattern 的正则引擎支持不一致：
-
pattern="[\u4e00-\u9fa5]+"（中文）在 iOS 上可能被忽略，或触发键盘异常 - 使用
\d在部分安卓 WebView 中等价于[0-9]，但某些旧内核不识别 Unicode 类别 - 推荐写法：用
[0-9]替代\d，中文用[\u4e00-\u9fa5]并加title提示，同时在 JS 中 fallback 双重校验
最易被忽略的一点：浏览器对 pattern 的编译发生在首次渲染或属性变更时，而不是每次输入——所以动态改 pattern 属性后，必须手动调用 input.reportValidity() 才能立即生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
