如何破壞客戶端表單驗證

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

　　對用戶體驗的影響

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

　　瀏覽器檢查的內容

　　雖然您可以在 JavaScript 中構建額外的檢查，但以下是瀏覽器將自動執行的內置檢查：

　　輸入類型檢查

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

　　檢查必填字段是否存在

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

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

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

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

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

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

　　使用 JS 提交函數破壞表單驗證

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

　　form.submit();

　　如何緩解

　　非 JS 方法：使用標準表單標記

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

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

　　您可以通過在窗體上調用該方法來使用內置的瀏覽器驗證。在驗證輸入后使用 JavaScript 方法。reportValiditysubmit

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

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

　　您可以在此處檢查實現狀態，但現在，在JS表單提交時，您應該堅持使用和方法。reportValiditysubmit

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

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