使用.innerHTML

时间:2018-03-09 19:29:08

标签: javascript html innerhtml html-validation

当对其上放置标准HTML验证约束的表单字段(在这种情况下为pattern& required)通过.innerHTML属性插入DOM时,该字段会不验证。我知道在事件注册方面使用.innerHTMLdocument.createElement()创建元素之间的区别,但之前没有遇到过这种副作用。

在我的特定情况下,必须将大量HTML插入到DOM中并通过document.createElement()创建所有HTML,然后设置所有节点属性并使用.appendChild()来建立适当的层次是不可取的。

为什么会这样,如果可能的话,如何克服它(请不要回答jQuery)?

注意:我知道 HTML <template> ,但由于在任何版本的IE中都不支持它,因此无法工作对我来说。

在下面的代码段中,第一个字段可以正常工作,但第二个字段展示了我正在谈论的内容。如果您手动输入数据(本例中为5位数)或按下按钮以动态插入有效数据,则无法验证。

&#13;
&#13;
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
});
&#13;
:required { background:#f99; }
:valid    { background:green; }
input[type=text] { width:250px; }
&#13;
<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">
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:3)

在正则表达式上缺少反斜杠:

"\\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">