可以通過使用HTML屬性在沒有JavaScript的情況下完成客戶端表單驗證。 1）使用強制性領域所需的使用。 2）驗證具有電子郵件或URL等類型屬性的電子郵件和URL，或將帶有正則格式的模式用於自定義格式。 3）使用Min，Max，MinLength和MaxLength的限制值。 4）使用約束驗證API自定義錯誤消息，儘管這些驗證僅限於客戶端。始終在服務器端再次驗證數(shù)據(jù)以確保安全性和準確性。

客戶端表單驗證是構建用戶友好和安全的Web表單的關鍵部分。好消息？您並不總是需要JavaScript來做到這一點。 HTML具有內置屬性，可讓您驗證瀏覽器中的基本用戶輸入。這是有效地使用它們而不會過度複雜事物的方法。

強制性字段required使用

required最簡單，最常見的驗證屬性。當添加到輸入字段時，它告訴瀏覽器，用戶必須在提交表單之前填寫。

例如：

 <輸入type =“ text” name =“用戶名”必需>

這適用於諸如名稱，電子郵件，密碼之類的字段 - 任何留空的東西都會破壞下一步。如果有人試圖提交而不填寫，瀏覽器將顯示一條默認消息。

專家提示：結合required其他屬性以進行更強驗證，例如確保電子郵件看起來像是實際的電子郵件地址。

驗證具有type和pattern電子郵件和URL輸入

HTML5引入了幾種輸入類型，例如email ， url和number ，它們會自動檢查格式是否匹配預期的內容。

例如：

 <輸入type =“ email” name =“ email”必需>

這樣可以確保用戶輸入看起來像電子郵件的內容（例如user@example.com）。 URL也是如此。如果您想要更多的控制，例如執(zhí)行特定格式，請使用帶正則表達式的pattern屬性。

例子：

 <input type =“ text” name =“ zipcode”模式=“ \ d {5}”必需>

該線僅接受5位郵政編碼。請記住，雖然這很方便，但正則是棘手的 - 仔細測試您的模式。

max最小值和最大值設置maxlength min和minlength

有時，您需要限制某人可以輸入多少或很少的人。對於數(shù)字，日期或文本長度，這些屬性是您的朋友：

• min和max在數(shù)字和日期輸入上工作
• minlength和maxlength設置了基於文本的輸入的字符限制

示例：

 <輸入type =“ number” name =“ age” min =“ 18” max =“ 99”>
<input type =“ text” name =“用戶名” minlength =“ 3” maxlength =“ 20”>

這些有助於防止邊緣案例，例如荒謬的用戶名或年齡價值觀。

有幾件事要記?。?/p>

• 這些檢查僅在表單提交中發(fā)生。
• 用戶仍然可以鍵入無效的值，但是表單在修復它們之前不會通過。

自定義錯誤消息（有限制）

默認情況下，當驗證失敗時，瀏覽器顯示自己的錯誤消息。但是您可以使用JavaScript的約束驗證API調整這些消息。

這是一種更改消息的快速方法：

 <輸入type =“ email” id =“電子郵件”必需>
<script>
  const emailInput = document.getElementById（&#39;email&#39;）;
  emailInput.addeventlistener（&#39;無效&#39;，函數(shù)（e）{
    e.target.setCustomVality（“請輸入有效的電子郵件地址。”）;
  }）;
</script>

請記住，這不能取代完整的驗證 - 用戶仍然可以完全繞過客戶端檢查。因此，服務器端也始終仔細檢查數(shù)據(jù)。

基本上，HTML形式驗證屬性可以最少的努力為您提供很多功能。它們非常適合簡單檢查並改善用戶體驗而無需編寫自定義腳本。只是不要獨自依靠它們來安全或複雜的邏輯 - 這就是後端驗證的目的。

以上是使用HTML屬性實現(xiàn)客戶端表單驗證。的詳細內容。更多資訊請關注PHP中文網其他相關文章！