gpt4 book ai didi

Javascript onchange 验证,以便 :valid and :invalid CSS selectors work

转载 作者:搜寻专家 更新时间:2023-10-31 23:26:18 25 4
gpt4 key购买 nike

这似乎是一件简单的事情,但我还没有找到任何相关信息。

我怎样才能使用类似下面的东西:

// 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 函数以允许使用这些选择器。

This article描述了如何使用 HTML5 Constraint API 来实现这一点。

示例:

#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>

关于Javascript onchange 验证,以便 :valid and :invalid CSS selectors work,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30607423/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com