目录

oninvalid 事件

❮上一节活动参考下一节❯

示例

如果输入字段无效，则警告一些文本：

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

亲自试一试 »

下面有更多 "亲自试一试" 示例。

描述

当可提交的 <input> 元素无效时，会发生 oninvalid 事件。

例如，如果设置了required属性并且字段为空，则输入字段无效（required属性指定提交表单之前必须填写输入字段）。

浏览器支持

表中的数字指定完全支持该事件的第一个浏览器版本。

Event
oninvalid	Yes	10.0	Yes	Yes	Yes

语法

在 HTML 中：

< element oninvalid=" myScript">

亲自试一试 »

在 JavaScript 中：

object.oninvalid = function(){ myScript};

亲自试一试 »

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

object.addEventListener("invalid", myScript);

亲自试一试 »

技术细节

气泡：	不
可取消：	是的
事件类型：	事件
HTML 标签：	<输入>
DOM 版本：	3 级活动

更多示例

示例

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

Name: <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 的数字，则警告一些文本：

Number: <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 教程：JavaScript 表单

❮上一节活动参考下一节❯