当具有标准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">
最佳答案
在正则表达式上缺少反斜杠:
"\\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">
关于javascript - 使用.innerHTML创建元素时,将跳过HTML表单字段验证,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49200847/