Javascript 使用.innerHTML创建元素时，将忽略HTML表单字段验证

当通过

.innerHTML

属性将具有标准HTML验证约束的表单字段（

pattern

&

required

）插入DOM时，该字段不会验证。我知道在事件注册方面使用

.innerHTML

和

document.createElement（）

创建元素之间的区别，但以前从未遇到过这种副作用

在我的特殊情况下，必须将大量HTML插入DOM中，并通过

document.createElement（）

创建所有HTML，然后设置所有节点属性并使用

.appendChild（）

建立适当的继承权，这是不可取的

为什么会这样？如果可能的话，如何克服（请不要用jQuery回答）

注意：我知道，但是由于IE的任何版本都不支持它，所以它对我来说不起作用

在下面的代码片段中，第一个字段将正常工作，但第二个字段演示了我所说的内容。如果手动输入数据（本例中为5位数字）或按下按钮以动态插入有效数据，则不会进行验证

document.querySelector（“div”）.innerHTML=`；
document.querySelector（“输入[type='button']”）。addEventListener（“单击”，函数（）{
document.getElementById（“断开”）.value=“12345”//12345或“12345”-无所谓
});
：必需{背景：#f99；}
：有效{背景：绿色；}
输入[类型=文本]{宽度：250px；}
您的regexp缺少反斜杠：

"\\d{5}"
 ^

看看反斜杠是如何消失的：
console.log（``）
您的regexp中缺少反斜杠：

"\\d{5}"
 ^

看看反斜杠是如何消失的：
console.log（``）
Ugh！我需要一些睡眠。HTML变成了JavaScript字符串，现在我们需要转义“\”。打得好，啊！我需要一些睡眠。HTML变成了JavaScript字符串，现在我们需要转义“\”。很好的调用。不要用innerHTML创建浏览器控件-它们不是文档元素，也不是纯粹的HTML，它们是控件。控件可以在文档上创建和呈现，但有时无法初始化，或者至少不会触发浏览器自动化。innerHTML非常适合于纯HTML元素，对于其他任何内容，请使用DOM。@Bekimbacj我很欣赏您的输入（没有双关语），但您的描述并不完全正确。HTML世界中没有“控件”这样的东西<实际上，code>.innerHTML

确实创建了DOM元素，它们是“纯”html。这些元素可以作为

节点

s访问，并且可以正常与之交互。

.innerHTML

唯一的问题是由于重新绘制和重新流动而导致的事件注册和性能下降。@BekimBacaj当您使用

时。innerHTML

您只是要求用户代理解析HTML内容的字符串，然后像通常一样处理该HTML。这与UA第一次加载页面时的操作没有什么不同，但新解析的HTML必须“注入”到现有DOM中，因此会出现时间问题（因此会出现事件注册问题）以及呈现问题。@Bekinbaja已经说过了所有这些，我同意使用DOM API来创建和更新DOM通常是更好的方法，因为它更干净，通常会产生更具可伸缩性的代码。@Bekimbacj我鼓励您在聊天中查看我的评论。我这么做已经很长时间了，我很有信心你会把操作系统和UA之间发生的事情与UA的DOM解析器和JS引擎中发生的事情混淆起来。关于

.innerHTML

的结果以及DOM的生成和更新方式，您也非常不正确。不要使用innerHTML创建浏览器控件-它们不是文档元素，也不是纯粹的HTML，它们是控件。控件可以在文档上创建和呈现，但有时无法初始化，或者至少不会触发浏览器自动化。innerHTML非常适合于纯HTML元素，对于其他任何内容，请使用DOM。@Bekimbacj我很欣赏您的输入（没有双关语），但您的描述并不完全正确。HTML世界中没有“控件”这样的东西<实际上，code>.innerHTML确实创建了DOM元素，它们是“纯”html。这些元素可以作为

节点

s访问，并且可以正常与之交互。

.innerHTML

唯一的问题是由于重新绘制和重新流动而导致的事件注册和性能下降。@BekimBacaj当您使用

时。innerHTML

您只是要求用户代理解析HTML内容的字符串，然后像通常一样处理该HTML。这与UA第一次加载页面时的操作没有什么不同，但新解析的HTML必须“注入”到现有DOM中，因此会出现时间问题（因此会出现事件注册问题）以及呈现问题。@Bekinbaja已经说过了所有这些，我同意使用DOM API来创建和更新DOM通常是更好的方法，因为它更干净，通常会产生更具可伸缩性的代码。@Bekimbacj我鼓励您在聊天中查看我的评论。我这么做已经很长时间了，我很有信心你会把操作系统和UA之间发生的事情与UA的DOM解析器和JS引擎中发生的事情混淆起来。关于

.innerHTML

的结果以及DOM的构建和更新方式，您也非常不正确。