我有一个输入元素，在我的浏览器(Mac上的Chrome)中呈现为这样。注意空白的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;">
根据MDN:
如果模式属性存在但未指定或无效，则不应用正则表达式，并且完全忽略此属性。如果模式属性有效，并且非空值与模式不匹配，则约束验证将阻止表单提交。
根据这一点，我的输入元素应该忽略pattern属性，因为pattern被赋予了空字符串值。相反，表单提交被约束验证阻止，并且我得到了一个关于模式不匹配的本地html工具提示警告。
更令人困惑的是，这个元素是由一个React组件呈现的，它完全可以正常工作，并且在我的组织中的其他地方使用，没有这个问题。
需要注意的其他事项：如果我在开发工具中手动完全删除该属性，则提交不会被阻止(这意味着肯定是该属性在执行)。在UI中，如果我将字段完全留空，则提交将不再被阻止(这意味着我通过了模式匹配约束)。
因此，似乎实际发生的是空白的pattern属性正在强制执行"；"空"；模式(与required属性相反)。这与MDN文档或我能找到的任何其他文档中描述的不同。
但是，事实上，这个React组件在其他地方呈现了完全相同的HTML，而没有这个问题，我觉得HTML表单DOM约束系统还有一些其他功能在强制执行空白模式，这在我能找到的文档中没有提到。
当您(或REACT)使用javascript修改DOM时，即使已经发生了更改，这些更改在检查器中也并不总是明显的。我猜模式属性是在页面呈现后用javascript设置的，但您只是看到了所述页面的初始呈现。尝试右键单击检查器中的元素并选择"；在控制台中使用"；。然后查看控制台中的模式属性。我猜情况会有所不同。