HTML 使用 .inner 创建元素时绕过表单字段验证HTML

Question

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

在我的特殊情况下，必须将大量 HTML 插入 DOM 并通过 document.createElement() 创建所有这些，然后设置所有节点属性和使用 .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">

HTML 使用 .inner 创建元素时绕过表单字段验证HTML

HTML Form Field Validation is Bypassed when Element is Created with .innerHTML

html

javascript

innerhtml

html-validation