Javascript onchange 验证,以便 :valid 和 :invalid CSS 选择器工作

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)

Ste*_* H. 5

点击“运行代码片段”查看!

您可以创建自定义验证器并使用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)