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

　　對(duì)用戶(hù)體驗(yàn)的影響

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

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

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

　　輸入類(lèi)型檢查

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

　　檢查必填字段是否存在

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

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

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

　　使用表單屬性破壞表單驗(yàn)證

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

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

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

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

　　form.submit();

　　如何緩解

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

　　將按鈕保留在表單內(nèi)并通過(guò)用戶(hù)直接單擊提交表單，表單將自動(dòng)驗(yàn)證

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

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

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

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

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

　　您可以通過(guò)在提交表單之前驗(yàn)證客戶(hù)端的輸入來(lái)改善用戶(hù)體驗(yàn)。請(qǐng)注意，因?yàn)闉g覽器的默認(rèn)驗(yàn)證行為很容易被拆除。

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