JavaScript 表單

JavaScript 表單驗證

HTML 表單驗證可以通過 JavaScript 完成。

如果表單域 (fname) 為空，該函數會提示一條消息，并返回 false，以防止表單被提交：

JavaScript 實例

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

提交表單時可以調用該函數：

HTML 表單實例

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

親自試一試

JavaScript 可以驗證數字輸入

JavaScript 通常用于驗證數字輸入：

請輸入 1 到 10 之間的數字：

親自試一試

自動 HTML 表單驗證

HTML 表單驗證可以由瀏覽器自動執行：

如果表單字段 (fname) 為空，則 required 屬性會阻止提交此表單：

HTML 表單實例

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

親自試一試

提示：自動 HTML 表單驗證在 Internet Explorer 9 或更早版本中不起作用。

數據驗證

數據驗證是確保用戶輸入干凈、正確和有用的過程。

典型的驗證任務是：

  • 用戶是否填寫了所有必填字段？
  • 用戶是否輸入了有效日期？
  • 用戶是否在數字字段中輸入了文本？

大多數情況下，數據驗證的目的是確保用戶輸入正確。

驗證可以通過許多不同的方法定義，并以許多不同的方式部署。

服務器端驗證由 Web 服務器在輸入發送到服務器后執行。

在將輸入發送到 Web 服務器之前，客戶端驗證由 Web 瀏覽器執行。

HTML 約束驗證

HTML5 引入了一種新的 HTML 驗證概念，稱為約束驗證。

HTML 約束驗證基于：

  • 約束驗證 HTML input 屬性
  • 約束驗證 CSS 偽選擇器
  • 約束驗證 DOM 屬性和方法

約束驗證 HTML input 屬性

屬性 描述
disabled 規定應禁用 input 元素。
max 規定 input 元素的最大值。
min 規定 input 元素的最小值。
pattern 規定 input 元素的值模式。
required 規定 input 字段必填。
type 規定 input 元素的類型。

如需完整列表，請訪問 HTML Input 屬性。

約束驗證 CSS 偽選擇器

選擇器 描述
:disabled 選擇規定了 "disabled" 屬性的 input 元素。
:invalid 選擇有無效值的 input 元素。
:optional 選擇未規定 "required" 屬性的 input 元素。
:required 選擇規定了 "required" 屬性的 input 元素。
:valid 選擇具有有效值的 input 元素。

如需完整列表，請訪問 CSS 偽類。