>
<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>
大多數字段類型都是顯而易見的，但是有例外。例如，信用卡是數字的，但是輸入16位數字時的增量/減少旋轉器是沒有用的，而且很容易上下。最好使用標准文本類型，但將InputMode屬性設置為數字，該屬性顯示了適當的鍵盤。設置自動完整=“ cc-number”還建議任何預先配置或先前輸入的卡號。
使用正確的字段類型和自動更正提供的好處，在JavaScript中很難實現。例如，某些移動瀏覽器可以：
>通過使用攝像頭掃描卡來導入信用卡詳細信息
>導入SMS 發送的一次性編碼
>自動驗證
瀏覽器確保輸入值遵守由類型，最小，最大步驟，最小值，最大長度，模式和所需屬性定義的約束。例如：-
- >試圖提交空價值會阻止表單提交，並在Chrome中顯示以下消息：>
啟發者將不允許在1到100範圍之外的值。如果您鍵入不是數字的字符串，則會出現類似的驗證消息。 所有，沒有一行JavaScript。
您可以通過以下方式停止瀏覽器驗證
<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>
>將Novalidate屬性添加到元素
>將formnaloalication屬性添加到提交按鈕或圖像
>
創建自定義JavaScript輸入
>如果您正在編寫新的基於JavaScript的日期條目組件，請停下來遠離鍵盤！
>>編寫自定義輸入控件很困難。您必須考慮鼠標，鍵盤，觸摸，語音，可訪問性，屏幕尺寸以及JavaScript失敗時會發生什麼。您還可以創建不同的用戶體驗。也許您的控件優於台式機，iOS和Android上的標準日期選擇器，但是陌生的UI會使某些用戶感到困惑。
開發人員選擇創建基於JavaScript的輸入的主要原因有三個主要原因。 >
1。標準控件很難樣式
> CSS樣式是有限的，通常需要黑客攻擊，例如在偽元素之後用標籤的::覆蓋輸入。情況正在改善，但質疑任何優先級的設計優先於功能的設計。 >
2。現代類型不支持舊瀏覽器
本質上，您正在編碼Internet Explorer。 IE用戶不會獲得約會選擇器，但仍然可以以yyyy-mm-dd格式輸入日期。如果您的客戶堅持使用，請僅在IE中加載polyfill。不需要負擔現代瀏覽器。
>
3。您需要一種新的輸入類型，該類型從未在
之前實施過
這些情況很少見，但始終從適當的HTML5字段開始。它們很快，甚至在腳本加載之前就可以工作。您可以根據需要逐步增強字段。例如，灑水的JavaScript可以確保日曆事件的結束日期發生在開始日期之後。
>
摘要：
>避免重新發明HTML控件！
> CSS驗證樣式
>您可以將以下偽級應用於輸入字段，以根據當前狀態進行樣式：
selector
描述 |
：重點
焦點的領域
：焦點
一個元素包含一個帶有焦點的字段（是的，它是家長選擇器！）
：焦點可見
由於鍵盤導航，元素具有重點，因此需要使用焦點戒指或更明顯
：必需的
具有所需屬性的字段
：選修的
沒有必需屬性的字段
：有效的
已通過驗證的字段
：無效的
尚未通過驗證的字段
：用戶錄音
用戶與它進行交互後已通過驗證的字段（僅Firefox）
：用戶活躍
用戶與它進行交互後尚未通過驗證的字段（僅Firefox）
：內部
該值在數字或範圍輸入的範圍內
：Outrange
該值超出數字或範圍輸入的範圍
：禁用
具有禁用屬性的字段
：啟用
沒有禁用屬性的字段
：只讀
具有隻讀屬性的字段
：read-write：
沒有隻讀屬性的字段
：檢查
檢查的複選框或廣播按鈕
：不定
不確定的複選框或無線電狀態，例如所有無線電按鈕未選中
:預設
默認提交按鈕或圖像
| >您可以使用::佔位符式元素為輸入的佔位符文字設計：
<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>
上面的選擇器具有相同的特異性，因此順序可能很重要。考慮此示例：
<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>
>無效的輸入具有紅色文本，但僅應用於具有禁用屬性的輸入 - >，因此所有啟用的輸入均為黑色。
>瀏覽器在頁面加載上應用驗證樣式。例如，在以下代碼中，每個無效字段都會有一個紅色邊框：>
用戶在與表單交互之前，用戶面對一組艱鉅的紅色框。在第一次提交或更改值之後顯示驗證錯誤將提供更好的體驗。那就是javaScript介入…
>
<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>
> JavaScript和約束驗證API
約束驗證API提供表單自定義選項，可以增強標準HTML字段檢查。您可以：
>停止驗證，直到用戶與字段進行交互或提交表單
>
顯示帶有自定義樣式的錯誤消息-
提供僅在HTML中不可能的自定義驗證。當您需要比較兩個輸入時，通常需要這是必要的，例如，當您輸入電子郵件地址或電話號碼時，檢查“新”和“確認”密碼字段具有相同的值，或確保一個日期是另一個日期。 >
-
形式驗證-
>在使用API之前，您的代碼應通過將表單的Novalidate屬性設置為true（與添加NovAlidate屬性相同）來禁用默認驗證和錯誤消息：
然後，您可以添加事件處理程序，例如表單提交時：>
>處理程序可以使用checkVality（）或reportVality（）方法檢查整個表單是有效的，當所有表單的輸入都是有效時，它們返回true。 （區別在於checkVality（）檢查是否有任何輸入是否受到約束驗證。）>
Mozilla Docs解釋：<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>
在每個無效的字段上也觸發了無效的事件。這不會冒出氣泡：必須將處理程序添加到使用它的每個控件中。
>
<span><span><span><input</span> type<span>="number"</span> min<span>="1"</span> max<span>="100"</span> required /></span>
</span>
>現在有效的表格可以產生進一步的驗證檢查。同樣，一個無效的形式可能會突出顯示無效的字段。 >
>字段驗證
單個字段具有以下約束驗證屬性：
>
<span>/* blue placeholder on email fields */
</span><span>input<span><span>[type="email"]</span>::placeholder</span> {
</span> <span>color: blue;
</span><span>}
</span>
willvalidate：如果元素是約束驗證的候選者，則返回tru
>驗證信息：驗證消息。如果字段有效，這將是一個空字符串。
vality：一個有效性的對象。當字段有效時，這具有有效的屬性集為TRUE。如果是錯誤的，則以下一個或多個屬性將是正確的：- >
| >有效性狀態 |
描述 |
.badinput
瀏覽器無法理解輸入
.customerror
設置了自定義有效性消息
.patternmismatch
該值與指定的模式屬性不匹配
.rangeoverflow
該值大於最大屬性
.rangeunderflow
該值小於最小屬性
.Stepmismatch
該值不符合步驟屬性規則
.toolong
字符串長度大於最大屬性
。過短
字符串長度小於最小屬性
.typemismatch
該值不是有效的電子郵件或URL
.valueMissing
所需的值是空的
單個字段具有以下約束驗證方法：
>
- > setCustomVality（消息）：為無效字段設置錯誤消息。當字段有效或字段將永遠無效時，必須傳遞一個空字符串。 >
> checkVality（）：當輸入有效時，返回true。 valid.valid屬性執行同樣的事情，但是checkVality（）也觸發了現場無效的事件，這可能很有用。
-
validateForm（）處理程序函數可以在每個字段中循環循環，並在必要時將無效類應用於其父元素：>
假設您的HTML定義了一個電子郵件字段：
<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>
當未指定電子郵件或無效時，該腳本將無效類應用於。提交表單時，CSS可以顯示或隱藏驗證消息：
創建自定義表單驗證器<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>
>以下演示顯示了需要用戶名以及電子郵件地址，電話號碼或兩者兼而有之的示例聯繫表
<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>
看到筆
約束驗證API示例by sitepoint（@sitepoint）
在Codepen上。
>使用名為FormValidate的通用表單驗證類實現。實例化對象時會傳遞表單元素。可以設置可選的第二個參數：
當用戶與之交互時， tay驗證每個字段
false（默認值）在第一個提交之後驗證所有字段（此後發生字段級驗證）>
>
-
formvalidate對象監視以下兩個：- >
- focusOut事件，然後檢查單個字段
- 表格提交事件，然後檢查每個字段
>均調用.ValidateField（field）方法，該方法檢查字段是否通過標準約束驗證。當它這樣做時，分配給該字段的任何自定義驗證功能依次執行。所有人都必須返回正確才能有效。
>
>無效的字段將無效的類應用於該字段的父元素，該類別使用CSS顯示紅色幫助消息。
>最後，當整個表單有效時，對象調用自定義提交功能：>
或者，您可以使用標準AddeventListener來處理表單提交事件，因為FormValidate會在表單無效時防止進一步的處理程序運行。
形成技巧<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>
表格是所有Web應用程序的基礎，開發人員花費大量時間來操縱用戶輸入。約束驗證得到很好的支持：瀏覽器可以處理大多數檢查並顯示適當的輸入選項。
>建議：
在可能的情況下，請使用標準HTML輸入類型。設置最小，最大，步驟，最小值，最大值，模式，必需，輸入模式和自動完成屬性。 >
如有必要，請使用一些JavaScript啟用自定義驗證和消息。
對於更複雜的字段，逐漸增強了標準輸入。
最後：- >忘記Internet Explorer！
- >
>除非您的客戶主要是用戶，否則無需實施您自己的後備驗證功能。所有HTML5輸入字段都在IE中工作，但可能需要更多的用戶工作。 （例如，IE不會檢測到您何時輸入無效的電子郵件地址。）您仍然必須驗證服務器上的數據，因此請考慮使用該數據作為IE錯誤檢查的基礎。 - >
HTML表格和約束驗證的常見問題（FAQ）
>
html形式驗證的重要性是什麼？它確保用戶輸入表單的數據在發送到服務器之前符合某些標準。這不僅可以維持數據的完整性，還通過提供有關輸入數據的正確性的立即反饋來增強用戶體驗。沒有表單驗證，就有可能會收到不正確，不完整甚至惡意數據的風險，這些數據可能導致各種問題，包括數據損壞，安全漏洞和系統崩潰。> HTML5如何改進形式驗證？
html5引入了幾個新的形式元素和屬性，這些元素和屬性使形式驗證變得更加容易，更有效。例如，它提供了新的輸入類型，例如電子郵件，URL和數字，它們會根據類型自動驗證輸入數據。它還介紹了所需的新屬性，模式和最小/最大屬性，使您可以在輸入數據上指定各種約束。此外，HTML5提供了一個內置驗證API，使您能夠使用JavaScript執行自定義驗證。
我可以在沒有JavaScript的情況下執行表單驗證嗎？
是的，您可以使用HTML5執行基本表單驗證獨自的。 HTML5提供了幾種新的輸入類型和屬性，使您可以在輸入數據上指定各種約束。例如，您可以使用所需的屬性來強制執行字段，以執行特定格式的模式屬性以及為數值輸入設置範圍的最小/最大屬性。但是，對於更複雜的驗證，您仍然需要使用JavaScript。錯誤消息。您可以使用有效狀態對象的setCustomVality方法為字段設置自定義錯誤消息。此方法採用一個字符串參數，當字段無效時，該參數將成為字段的驗證消息。您可以響應無效事件調用此方法，該事件是在字段失敗驗證時觸發的。
>>如何禁用html5 form驗證？
>您可以通過添加添加html5表單驗證來禁用html5 form驗證Novalidate屬性屬於表單元素。當存在此屬性時，瀏覽器將在提交時對錶格進行任何驗證。如果您要在服務器端或使用自定義JavaScript上處理驗證，這可能很有用。 如何在html5？ 中驗證多個字段，不提供構建 - 在一起驗證多個字段的方法中。但是，您可以使用JavaScript實現此目標。您可以編寫自定義驗證功能，該功能檢查多個字段的值，並在不符合所需標準的情況下設置自定義有效性消息。您可以根據表單的提交事件或字段的輸入/更改事件來調用此功能。 >如何根據html5？ >>如何在html5？
html5中執行異步驗證。但是，您可以使用JavaScript實現此目標。您可以編寫執行異步操作（例如AJAX請求）的自定義驗證功能，並根據結果設置自定義有效性消息。您可以根據字段的輸入/更改事件或表單的提交事件來調用此功能。
>>如何在HTML5表單驗證中樣式？ HTML5形式驗證中的消息由瀏覽器確定，不能使用CSS直接設計。但是，您可以使用JavaScript創建自定義錯誤消息，並根據需要進行樣式。您可以使用驗證API來確定字段何時無效並相應地顯示自定義錯誤消息。
>如何測試HTML表單的驗證？
>您可以測試驗證的驗證通過將各種類型的數據輸入到字段中並試圖提交表格，一種HTML表單。您應該使用有效數據和無效數據進行測試，以確保在所有情況下驗證都能正常工作。您也可以使用自動測試工具或庫來執行更全面的測試。
