有两种方法可以检查有效性。

1. inputElement.checkValidity()返回true或false
2. inputElement.validity返回有效性状态对象。inputElement.validity.valid回报true/false

除了使用 keyup，您还可以使用 'input' 事件。所有实现了约束验证 API 的浏览器也都实现了输入事件。

如果您使用上面的选项 1，Opera 在这里有一个错误，将显示其验证提示。所以你应该使用2。

我创建了一个 html5 表单库，它为无法运行的浏览器实现了所有未知的功能 + 修复了 HTML5 浏览器中的问题。所以一切都像规范中定义的那样工作，但它建立在 jQuery 之上。（http://afarkas.github.com/webshim/demos/index.html）。

您可以使用pattern属性。

它将在客户端对其进行验证，因此无需再次在客户端进行验证。

js小提琴。

但是，请确保在服务器端再次执行此操作。

另请注意，由于目前浏览器的兼容性非常差，因此 JavaScript 是验证客户端的标准。

作为补充，您可以检查每个元素是否无效，例如，通过以下代码在第一个无效元素中设置焦点：

var Form = document.getElementById('FormID');
if (Form.checkValidity() == false) {
    var list = Form.querySelectorAll(':invalid');
    for (var item of list) {
        item.focus();
    }
}