即使为空白，HTML 输入属性“模式”也会强制执行模式

Question

我的浏览器（Chrome，Mac 上）有一个这样呈现的输入元素。注意空白的pattern 属性

<input aria-labelledby="Amount Given" type="text" pattern="" inputmode="" field="[object Object]" data-qa="Amount Given" placeholder="$0.00" variant="default" metadata="[object Object]" class="sc-fznzOf dIIJtr" value="" style="text-align: right;">

According to MDN:

如果模式属性存在但未指定或无效，则不应用正则表达式并完全忽略此属性。如果模式属性有效且非空值与模式不匹配，则约束验证将阻止表单提交。

据此，我的输入元素应该忽略pattern 属性，因为pattern 被赋予空字符串值。相反，约束验证阻止了表单提交，并且我收到有关模式不匹配的原生 html 工具提示警告。

让这更令人困惑的是，这个元素是由一个 React 组件呈现的，该组件完全正常运行，并且在我组织的其他地方使用，没有这个障碍。

其他需要注意的事项：如果我在开发工具中手动完全删除了该属性，提交不会被阻止（这意味着它肯定是这个属性在执行）。在 UI 中，如果我将字段完全留空，则不再阻止提交（这意味着我通过了模式匹配约束）。

因此，似乎实际发生的是空白pattern 属性在我的字段上强制执行“空”模式（与required 属性相反）。这与 MDN 文档或我能找到的任何其他文档中描述的不同。

但是，事实上，这个 React 组件在其他地方呈现完全相同的 HTML 而没有这个问题，我觉得 HTML 表单 DOM 约束系统的其他一些功能是强制空白模式，这在我能找到的文档。

Answer 1

当您（或 REACT）使用 javascript 修改 DOM 时，检查器中的更改并不总是很明显，即使它们已经发生了。我猜想在呈现页面后使用 javascript 设置模式属性，但您只是看到所述页面的初始呈现。尝试右键单击检查器中的元素并选择“在控制台中使用”。然后在控制台中查看pattern属性是什么。我的猜测是它会有所不同。