HTML 使用 .inner 创建元素时绕过表单字段验证HTML
HTML Form Field Validation is Bypassed when Element is Created with .innerHTML
当具有标准 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">
正则表达式中缺少反斜杠:
"\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 验证约束的表单字段(在本例中为 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">
正则表达式中缺少反斜杠:
"\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">