【整理學習】表單複習+用戶自定義表單驗證

簡介

表單用於收集用戶輸入，在網頁中主要負責數據採集功能。
表單元素指的是不同類型的 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>