如何检测输入字段的HTML5约束违反

How to detect HTML5 constraint violation for input fields?

本文关键字：HTML5 约束 字段 输入 何检测 检测      更新时间：2023-09-26

HTML5伞形规范有:invalid CSS伪类用于样式化input与破碎的内容。

如果其中一个字段无效，我的Firefox 38.2.1不会发送表单。

我怎么能-在纯浏览器JS/DOM API -得到包含无效数据的字段?

我如何检查整个表格?

您可以使用querySelectorAll获取所有无效元素。

document.getElementById('test').onclick = function () {
    var invalid = document.querySelectorAll('input:invalid');
};

从上面的(简单的)示例中可以看到，我在click事件上这样做是因为如果存在无效元素，表单将不会提交。

invalid变量包含无效元素的集合。

您可以在JSFiddle上看到一个工作示例。

HTMLFormElement object/type有一个checkValidity方法，你可以用它来检查。

点击这里查看:https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement

相关文章：