02-form.html（表单验证）

最新推荐文章于 2023-06-21 15:18:45 发布

原创最新推荐文章于 2023-06-21 15:18:45 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

26 篇文章

订阅专栏

本文深入探讨HTML5中新增的表单元素及属性，包括url、email、number、range、color、datetime-local、time、month、week等输入类型，以及autocomplete、autofocus、required和pattern等属性的使用方法，旨在帮助开发者掌握更高效、友好的表单设计技巧。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 不需要验证，直接提交 -->
	<!-- <form action="" id="form1" novalidate="novalidate"> -->
	<form action="" id="form1">
		<input type="url"><br>
		<input type="email"><br>
		<input type="number"><br>
		<input type="range" min="0" max="100" value="50"><br>
		<input type="color"><br>
		<input type="datetime-local"><br>
		<input type="time"><br>
		<input type="month"><br>
		<input type="week"><br>
		<input type="text" placeholder="请输入姓名"><br>
		<!-- 是否保存用户输入内容 -->
		<input type="text" autocomplete="off"><br>
		<!-- 光标自动聚焦 -->
		<input type="text" autofocus="autofocus"><br>
		<input type="text" required="required"><br>
		<input type="text" pattern="\d{1,5}" id="text"><br>
		<!-- 效果同form中的novalidate -->
		<!-- <input type="submit" value="提交" formnovalidate="formnovalidate"> -->
		<input type="submit" value="提交">
	</form>
	
	<!-- 关联form1一起提交 -->
	<input type="text" form="form1">
</body>
<script>
	var oText = document.querySelector("#text");
	//var oText = document.getElementById("text");
	oText.addEventListener("invalid", fn, false);
	function fn() {
		// 控制台打印验证失败原因
		console.log(this.validity);
		if(this.validity.patternMismatch) {
			// 自定义错误提示消息
			this.setCustomValidity("只能输入一到五位数字！");	
		}
	}
</script>
</html>