low*_*tex 3 html javascript css validation
这似乎是一件简单的事情,但我无法找到任何关于此的信息。
我如何使用以下内容:
// html: <input type="text" onchange="validate()">
function validate(e) {
e.preventDefault();
if(isValid(this.value)) {
// make valid somehow
} else {
// make invalid somehow
}
}
Run Code Online (Sandbox Code Playgroud)
以便以下 CSS 可以正常工作:
input:valid {
background: green;
}
input:invalid {
background: red;
}
Run Code Online (Sandbox Code Playgroud)
点击“运行代码片段”查看!
您可以创建自定义验证器并使用setCustomValidity元素上的函数来允许使用这些选择器。
本文介绍了如何使用 HTML5 Constraint API 来实现这一点。
#inputField:valid {
background-color: green;
}
#inputField:invalid {
background-color: red;
}Run Code Online (Sandbox Code Playgroud)
<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>Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
5692 次 |
| 最近记录: |