📌  相关文章
📜  HTML | DOM oninvalid 事件(1)

📅  最后修改于: 2023-12-03 14:41:48.392000             🧑  作者: Mango

HTML | DOM oninvalid 事件

介绍

oninvalid 事件是 HTML5 中新增的一种事件。当表单的输入框未通过验证时，该事件就会触发。通过使用 oninvalid 事件可以自定义输入框未通过验证时的处理方式，如弹出提示框或改变输入框的样式。

语法
<input oninvalid="myFunction()" ... >
示例

下面是一个使用 oninvalid 事件的示例。当输入框中没有输入内容时，该输入框的背景颜色将变成红色。

<!DOCTYPE html>
<html>
<head>
	<title>oninvalid 示例</title>
	<style>
		input:invalid {
			background-color: red;
		}
	</style>
</head>
<body>
	<form>
		<label for="username">用户名：</label>
		<input type="text" id="username" name="username" required oninvalid="this.setCustomValidity('请输入用户名')">
		<input type="submit" value="提交">
	</form>
</body>
</html>

在上面的示例中，当输入框中没有输入内容时，就会触发 oninvalid 事件，并将输入框的自定义验证消息设置为“请输入用户名”。

属性

oninvalid 事件具有下列属性：

  • type：返回事件的类型。对于 oninvalid 事件，该属性的值为 "invalid"。
  • target：返回事件的目标对象，即发生事件的元素。对于 oninvalid 事件，该属性的值为当前输入框对象。
方法

oninvalid 事件具有下列方法：

  • setCustomValidity(message)：设置当前输入框的自定义验证消息。如果参数 message 为空字符串，则表示恢复默认验证消息。
总结

oninvalid 事件是 HTML5 中新增的一种事件，可用于处理表单输入框的验证。通过这个事件，我们可以自定义输入框未通过验证时的处理方式，很好地提升了用户体验。