在將表單提交到服務(wù)器之前，默認(rèn)的瀏覽器行為是檢查所有必填字段是否存在且格式是否正確。這稱為客戶端表單驗證。但是，很容易無意中禁用此有用的瀏覽器行為。

　　對用戶體驗的影響

　　首先，我們在這里談?wù)摰氖怯脩趔w驗問題，而不是安全問題。提交表單后，必須在服務(wù)器端對其進(jìn)行驗證。這可確保只有正確的數(shù)據(jù)才能進(jìn)入數(shù)據(jù)庫。因此，雖然客戶端表單驗證不應(yīng)涉及應(yīng)用程序的安全性，但它對于良好的用戶體驗非常重要。您希望向用戶提供有關(guān)輸入數(shù)據(jù)是否“已準(zhǔn)備好提交”的即時反饋。如果沒有客戶端驗證，用戶必須等到響應(yīng)從服務(wù)器返回，并在等待后調(diào)整數(shù)據(jù)。

　　瀏覽器檢查的內(nèi)容

　　雖然您可以在 JavaScript 中構(gòu)建額外的檢查，但以下是瀏覽器將自動執(zhí)行的內(nèi)置檢查：

　　輸入類型檢查

　　每當(dāng)您為輸入字段指定類型時，瀏覽器都會檢查用戶輸入是否與表單提交中的該類型匹配。更具體地說，當(dāng)您提交表單并且您的輸入不匹配時，瀏覽器會通知您，并且在您修復(fù)表單之前不會提交表單。

　　檢查必填字段是否存在

　　每當(dāng)輸入字段具有必需屬性時，就會檢查其是否存在。

　　您可以使用更多用于客戶端輸入驗證的內(nèi)置功能。

　　現(xiàn)在，我們回顧了瀏覽器出色的驗證功能，讓我們來看看它是如何在意外中被破壞的，以及如何緩解這種情況。

　　使用表單屬性破壞表單驗證

　　從HTML5開始，您可以使用表單外部的按鈕來提交表單。為此，您必須為按鈕提供具有表單 ID 值的表單屬性。

　　這將提交表單，即使按鈕位于表單之外。雖然可以做到這一點，但它跳過了瀏覽器的本機輸入檢查功能。

　　使用 JS 提交函數(shù)破壞表單驗證

　　如果表單是通過 JS 提交函數(shù)提交的，則跳過所有輸入檢查。

　　form.submit();

　　如何緩解

　　非 JS 方法：使用標(biāo)準(zhǔn)表單標(biāo)記

　　將按鈕保留在表單內(nèi)并通過用戶直接單擊提交表單，表單將自動驗證

　　2.JS方法：使用HTML格式元素報告有效性()

　　您可以通過在窗體上調(diào)用該方法來使用內(nèi)置的瀏覽器驗證。在驗證輸入后使用 JavaScript 方法。reportValiditysubmit

　　截至發(fā)布日期，此方法在除 IE 之外的所有瀏覽器中都可用。

　　還有另一種類似的方法：。但是，它在Safari中尚不受支持(當(dāng)然還有IE)。使用該方法，您可以立即請求提交表單，并在提交之前進(jìn)行驗證。它就像單擊提交按鈕(在表單內(nèi)部)時發(fā)生的默認(rèn)行為一樣。requestSubmit requestSubmit

　　您可以在此處檢查實現(xiàn)狀態(tài)，但現(xiàn)在，在JS表單提交時，您應(yīng)該堅持使用和方法。reportValiditysubmit

　　您可以通過在提交表單之前驗證客戶端的輸入來改善用戶體驗。請注意，因為瀏覽器的默認(rèn)驗證行為很容易被拆除。

　　避免在表單外部使用按鈕，但如果這樣做，請僅在調(diào)用表單后使用 JavaScript 提交表單。reportValidity