javascript - 使用 .innerHTML 创建元素时会绕过 HTML 表单字段验证

Question

当具有标准 HTML 验证约束的表单字段(在本例中为 pattern 和 required)通过 .innerHTML 插入到 DOM 中时属性，该字段不验证。我知道使用 .innerHTML 创建元素之间的区别和document.createElement()关于事件注册，但以前没有遇到过这种副作用。

在我的特殊情况下，必须将大量 HTML 插入 DOM 并通过 document.createElement() 创建所有这些 HTML ，然后设置所有节点属性并使用 .appendChild()建立适当的等级制度是不可取的。

这是为什么，如果可能的话，如何克服(请不要使用 jQuery 答案)？

注意:我知道 HTML <template> ，但由于任何版本的 IE 都不支持它，所以它对我不起作用。

在下面的代码片段中，第一个字段将按其应有的方式工作，但第二个字段演示了我正在谈论的内容。如果您手动输入数据(在本例中为 5 位数字)或按下按钮动态插入有效数据，它不会验证。

document.querySelector("div").innerHTML = `<input type="text" id="broken" name="zip" pattern="\d{5}" required placeholder="I don't.">`;

document.querySelector("input[type='button']").addEventListener("click", function(){
  document.getElementById("broken").value = "12345";  // 12345 or "12345" - doesn't matter
});

:required { background:#f99; }
:valid    { background:green; }
input[type=text] { width:250px; }

<input type="text" id="zip2" name="zip2" pattern="\d{5}" required placeholder="I work as I should (5 digits please).">
<div></div>
<input type="button" value="Populate">

Answer 1

正则表达式中缺少反斜杠:

"\\d{5}"
 ^

看看反斜杠是如何消失的:

console.log(`<input type="text" id="broken" name="zip" pattern="\d{5}" required placeholder="I don't.">`)

现在一切都按预期进行。

document.querySelector("div").innerHTML = `<input type="text" id="broken" name="zip" pattern="\\d{5}" required placeholder="I don't.">`;   

document.querySelector("input[type='button']").addEventListener("click", function(){
  document.getElementById("broken").value = "12345";  // 12345 or "12345" - doesn't matter
});

:required { background:#f99; }
:valid    { background:green; }
input[type=text] { width:250px; }

<input type="text" id="zip2" name="zip2" pattern="\d{5}" required placeholder="I work as I should (5 digits please).">
<div></div>
<input type="button" value="Populate">