【整理学习】表单复习+用户自定义表单验证

简介

表单用于收集用户输入，在网页中主要负责数据采集功能。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
<input> 元素是最重要的表单元素。

一个表单有三个基本组成部分：

• 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
• 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
• 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

一般可以这样写：

<form>
	<input type="email" />
	<input type="tel" />
	<input type="url" />
	<input type="search"></input>
	<input type="range" min="10" max="20" step="1"></input>


	<input type="month"></input>
	<input type="submit" value="提交" />
</form>

用户自定义表单验证Demo

效果图如下：

首先我们在我们的body标签里面写一个form表单

<form>
	<input type="text" />
	<input type="submit" value="提交" />
</form>

在我们的script标签里面写我们的函数

<script type="text/javascript">
	window.onload = function () {
		var inputEl = document.querySelector("input");
		var submit = document.querySelectorAll("input")[1];
		submit.onclick = function () {
			var val = inputEl.value;
			if (val == "hls") {
				submit.setCustomValidity("请不要输入敏感词")
			} else {
				submit.setCustomValidity("")
			}
		}

		submit.addEventListener("invalid", function () {
			console.log(submit.validity)
		})
	}
</script>