HTML5高级之新增form表单中的新API、新事件（带示例）

最新推荐文章于 2024-06-01 07:22:27 发布

猫爷001

最新推荐文章于 2024-06-01 07:22:27 发布

阅读量1.4k

点赞数

分类专栏： HTML5 文章标签： HTML5

本文链接：https://blog.csdn.net/maoye198602102339/article/details/82874103

版权

本文介绍了HTML5中新增的form表单验证API，包括setCustomValidity()和checkValidity()方法，以及invalid事件和ValidityState对象的相关属性。setCustomValidity()允许自定义验证信息，checkValidity()用于在提交前验证表单。invalid事件在表单验证失败时触发，而ValidityState对象提供了一系列状态属性，如valid、valueMissing等，帮助实现更精确的自定义验证过程。

摘要由CSDN通过智能技术生成

HTML5中新增的API方法

--setCustomValidity() 定制验证信息

--checkValidity() 实现表单验证

（1）setCustomValidity()

--如果浏览器提交了一个包含无效的表单，支持HTML5的浏览器会显示一条错误信息

--使用setCustomValidity()可以定制化验证消息

--如果提供的是空消息，错误消息就会被清楚

语法：setCustomValidity(message)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>setCustomValidity</title>
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id);
		}

		function init(){
			txtName = $("txtName");
			txtName.addEventListener("blur", no_empty,false);
		}
		function no_empty(){
			var value = txtName.value;
			if (value.length == 0) {
				txtName.setCustomValidity("用户名不能为空");
			}else {
				txtName.setCustomValidity("");
			}
		}
		window.addEventListener("load",init,false);
	</script>
</head>
<body>
	<form method="get">
		<table>
			<tr>
				<td>用户名：</td>
				<td><input type="text" name="txtName" required id="txtName"></td>
			</tr>
			<tr>
				<td>
					<input type="submit" name="sub" value="提交">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

注意：

--有错误时，可以设置setCustomValidity用于更改错误提示信息

--如果错误更改后，一定要将setCu

最低0.47元/天解锁文章

猫爷001

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5高级之新增form表单中的新API、新事件（带示例）

HTML5中新增的API方法 --setCustomValidity() 定制验证信息--checkValidity() 实现表单验证（1）setCustomValidity()--如果浏览器提交了一个包含无效的表单，支持HTML5的浏览器会显示一条错误信息--使用setCustomValidity()可以定制化验证消息-...
复制链接

扫一扫

专栏目录