这似乎是一件简单的事情，但我还没有找到任何相关信息。
我怎样才能使用类似下面的东西：
// html: <input type="text" onchange="validate()">
function validate(e) {
e.preventDefault();
if(isValid(this.value)) {
// make valid somehow
} else {
// make invalid somehow
}
}
这样以下 CSS 就可以按您的预期工作：
input:valid {
background: green;
}
input:invalid {
background: red;
}
点击“运行代码片段”即可查看！
您可以创建自定义验证器并使用setCustomValidity元素上的函数以允许使用这些选择器。
本文 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Complex_constraints_using_HTML5_Constraint_API描述如何使用 HTML5 Constraint API 来实现此目的。
Example:
#inputField:valid {
background-color: green;
}
#inputField:invalid {
background-color: red;
}
<html>
<body>
Type a value (must be 'abc'): <input id="inputField">
<script type="text/javascript">
function validateField() {
if (this.value !== 'abc') {
this.setCustomValidity('Value must be abc!');
}
else {
this.setCustomValidity('');
}
}
window.onload = function () {
document.getElementById("inputField").oninput= validateField;
}
</script>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
