动态添加自定义有效性似乎破坏了模式验证。有什么方法可以使用 Javascript 解决此问题？
<html>
<head>
<title>Append validation issue</title>
<script>
function dothis(){
var f = document.createElement("form");
var i = document.createElement("input");
i.type = "text";
i.pattern = "[A-Z]{3}";
i.setCustomValidity("watch me break");
var s = document.createElement("input")
s.type = "submit";
f.appendChild(i);
f.appendChild(s)
document.getElementById("core").appendChild(f);
}
</script>
</head>
<body>
<div onclick="dothis()">click</div>
<div id="core"></div>
</body>
</html>
最佳答案
使用setCustomValidity 将设置customError property为真，因此该元素将始终无效。
所以我们应该在文本无效时使用setCustomValidity，在有效时清除。
function dothis(){
var f = document.createElement("form");
var i = document.createElement("input");
i.type = "text";
i.pattern = "[A-Z]{3}";
i.oninput = function() {
this.setCustomValidity('');
}
i.oninvalid = function() {
this.setCustomValidity("watch me break");
}
var s = document.createElement("input")
s.type = "submit";
f.appendChild(i);
f.appendChild(s)
document.getElementById("core").appendChild(f);
}
关于javascript - 使用 setCustomValidity 动态创建表单时，Google Chrome 模式正则表达式不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36880198/