JavaScript HTML DOM oninvalid 事件

oninvalid 事件

当提交<input>元素无效时，会发生oninvalid事件。例如，如果设置了required属性被设置并且字段为空，则输入字段无效（required属性指定在提交表单之前必须填写输入字段）。

如果输入字段无效，则提醒一些文本：

<input type="text" oninvalid="alert('You must fill out the form!');" required>

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
事件
oninvalid	10.0+	支持	支持	支持	支持

语法

在HTML中：

在JavaScript中：

object.oninvalid = function(){myScript};

在JavaScript中，使用addEventListener()方法：

object.addEventListener("invalid", myScript);

注意:在Internet Explorer 8和更早版本不支持使用addEventListener()方法。

技术细节

项目	描述
冒泡：	没有
取消：	可以
事件类型：	Event
支持的HTML标记：	<body>
DOM版本	DOM Event Level 3

更多例子

如果输入字段包含少于6个字符，则提醒一些文本：

名字: <input type="text" id="myInput" name="fname" pattern=".{6,}" required>

<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);

function myFunction() {
  alert("Must contain 6 or more characters");
}
</script>

尝试一下

如果输入字段包含小于2或大于5的数字，则提醒一些文本：

数字: <input type="number" id="myInput" name="quantity" min="2" max="5" required>

<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);

function myFunction() {
  alert("You must pick a number between 2 and 5. You chose: " + this.value);
}
</script>

尝试一下

JavaScript HTML DOM oninvalid 事件

oninvalid 事件

浏览器支持

语法

技术细节

更多例子

相关页面