全文共3663字，預計學習時長
11分鐘
表單驗證是使用HTML5時的一個內置特性，HTML5提供了各種驗證屬性。作為瀏覽器端HTML和JavaScript的一部分。在將數據發送到服務器之前，我們可以使用它來驗證表單輸入。但是，我們應該信任發送的內容，所以最終驗證應該仍然在服務器上進行。
當表單輸入有效時，要素將顯示:valid 偽類樣式表。如果它是無效的，那麼則出現:invalid 偽類樣式表。
當表單輸入無效時，瀏覽器將阻止表單提交併顯示錯誤信息。
表單驗證屬性
Pattern
Pattern應用於文本、檢索、鏈接、電話、郵件和密碼形式的輸入元素。
·它將正則表達式設置為數值，然後瀏覽器對其進行驗證。
Min
該屬性適用於範圍、數字、日期、月、周、時間、本地時間等類型的輸入元素。
·當輸入範圍或數字時，它會檢驗該值是否大於或等於Min屬性的給定值。
·當輸入日期、月份或星期時，它會檢驗日期是否為該屬性給定日期或在給定日期之後。
·當輸入時間時，它會檢驗日期和時刻是否都大於或等於該屬性給定時期。
Max
Max屬性是min屬性的對立面，它檢查輸入的內容是否小於或等於該屬性的給定值。
·當應用於範圍或數字類型的輸入時，它將檢查輸入的數字是否小於或等於min屬性的給定值
·當應用於日期、月份或星期等類型的元素時，它將檢查日期是否小於或等於該屬性值中給定的日期。
·當應用於時間類型輸入時，它將檢查日期和時間是否小於或等於min屬性的給定值。
Required
該屬性驗證輸入元素是否為空。
·它可以用於文本、檢索、鏈接、電話、郵件、密碼、日期、時間、月份、星期、數字、複選框、錄音、文檔，以及被選中內容和文本框等元素。
Step
Step檢驗輸入值是否為整數。
·若輸入日期類型的元素，它會檢查天數是否為整數。
·若輸入月份類型的元素，它會檢查月份數是否為整數。
·若輸入星期類型的元素，它會檢查星期數是否為整數。
·若輸入時間類型的元素，它會檢查秒數是否為整數。
·若輸入範圍和數字類型的元素，它會檢查範圍和數值是否為整數。
Minlength
Minlength屬性可應用於文本、檢索、鏈接、電話、電子郵、密碼和文本框類型的輸入元素。
·它檢查用戶輸入文本字數是否大於或等於該屬性值。
Maxlength
Maxlength屬性同樣可應用於文本、檢索、鏈接、電話、電子郵、密碼和文本框類型的輸入元素。
·它檢查用戶輸入文本字數是否小於或等於該屬性值。
應用表單驗證屬性
我們可以通過將表單驗證屬性添加到元素中來使用它們。例如，編寫一份以電子郵件地址作為輸入的表單。
第一步，輸入以下HTML語言：
<code><formid>/<code>
<code> <labelfor>What's your email address?/<labelfor>/<code>
<code> /<code>
<code> <buttontype>Submit/<buttontype>/<code>
<code>
在上述代碼中，輸入元素帶有required屬性，根據設定進行輸入。
同時，我們還以電子郵件地址的正則表達式作為值，對其添加pattern屬性。
接著如下所示，當輸入有效或無效時，我們通過添加樣式表來改變輸入元素的邊界：
<code>input:invalid {/<code><code> border: 1px solid red/<code>
<code>}/<code>
<code>input:vvalid {/<code><code> border: 1px solid black/<code>
<code>}/<code>
來源：view rawinput.css 平臺： GitHub
此處會用到文章開頭提及的偽類樣式來完成這一步驟。
最後，通過調用preventDefault來添加JavaScript代碼以防止本例中的表單提交。
<code>constform = document.querySelector('#form');/<code><code>form.onsubmit = (e) => {/<code><code> e.preventDefault();/<code>
<code>}/<code>
再舉一個檢查輸入的長度和範圍的例子。比如，編寫如下 HTML代碼來獲取用戶的姓名和年齡：
<code><formid>/<code>
<code> <labelfor>What's your name?/<labelfor>/<code>
<code> /<code>
<code>
/<code>
<code> Name is too short/<code>
<code> Name is too long/<code>
<code>
/<code>
<code> <labelfor>What's your age?/<labelfor>/<code>
<code> /<code>
<code>
/<code>
<code> Age is too high/<code>
<code> Age is too low/<code>
<code>
/<code>
<code> <buttontype>Submit/<buttontype>/<code>
<code>
輸入的姓名和年齡都具有長度和範圍屬性，當輸入無效時，可以看到以文中所示形式出現的輸入信息。
與例一相同，當輸入元素有效或無效時，輸入樣式表來更改輸入框邊界：
<code>input:invalid {/<code><code> border: 1px solid red/<code>
<code>}/<code>
<code>input:vvalid {/<code><code> border: 1px solid black/<code>
<code>}/<code>
最後，當輸入無效時可以通過JavaScript看到驗證信息：
<code>const form = document.querySelector('#form');/<code><code>const name = document.querySelector('#name');/<code><code>const age = document.querySelector('#age');/<code><code>const nameTooShort = document.querySelector('#name-too-short');/<code><code>const nameTooLong = document.querySelector('#name-too-long');/<code><code>const ageTooLow = document.querySelector('#age-too-low');/<code><code>const ageTooHigh = document.querySelector('#age-too-high');/<code><code>form.onsubmit= (e) => {/<code><code> e.preventDefault();/<code>
<code>}/<code>
<code>name.oninput= (e) => {/<code><code> nameTooShort.hidden=true;/<code>
<code> nameTooLong.hidden=true;/<code>
<code> if (e.srcElement.validity.tooShort) {/<code><code> nameTooShort.hidden=false;/<code>
<code> }/<code>
<code>if (e.srcElement.validity.tooLong) {/<code><code> nameTooLong.hidden=false;/<code>
<code> }/<code>
<code>}/<code>
<code>age.oninput= (e) => {/<code><code> ageTooLow.hidden=true;/<code>
<code> ageTooHigh.hidden=true;/<code>
<code> if (e.srcElement.validity.rangeOverflow) {/<code><code> ageTooHigh.hidden=false;/<code>
<code> }/<code>
<code>if (e.srcElement.validity.rangeUnderflow) {/<code><code> ageTooLow.hidden=false;/<code>
<code> }/<code>
<code>}/<code>
在上述代碼中，將oninput事件處理程序設置為事件處理程序函數，以便檢查後續輸入的有效性。
在每個函數中，我先隱藏所有信息，這樣就不會看到過時的消息了。然後，根據設置的最小和最大長度來檢查名稱輸入是否太短或太長。
若出現任何錯誤，會在HTML中取消隱藏相應的信息。
同樣，我們根據長度的最大最小設定值來檢驗年齡輸入值是否在所屬區間內。若出現錯誤，我們會在HTML中取消隱藏相應的信息。
通過HTML5和JavaScript，不需要任何函數庫就可以檢驗各種類型輸入值的有效性。
我們可以檢驗長度、範圍、任何帶有正則表達式的模式等輸入元素，但在保存之前應當檢查服務器端，因為部分用戶仍可以破解瀏覽器端應用程序來跳過驗證。
我們一起分享AI學習與發展的乾貨
閱讀更多 讀芯術 的文章
