JavaScript Forms
JavaScript 表單驗證
HTML 表單驗證可以透過 JavaScript 完成。
如果表單欄位 (fname) 為空，此函式會發出警告訊息，並返回 false，以阻止表單提交
JavaScript 示例
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("姓名必須填寫");
return false;
}
}可以在表單提交時呼叫該函式
HTML 表單示例
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
姓名: <input type="text" name="fname">
<input type="submit" value="提交">
</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="提交">
</form>
自己動手試一試 »
自動 HTML 表單驗證在 Internet Explorer 9 或更早版本中不起作用。
資料驗證
資料驗證是確保使用者輸入乾淨、正確且有用的過程。
典型的驗證任務包括
- 使用者是否填寫了所有必填欄位？
- 使用者是否輸入了有效日期？
- 使用者是否在數字欄位中輸入了文字？
最常見的，資料驗證的目的是確保使用者輸入正確。
驗證可以透過許多不同的方法定義，並以許多不同的方式部署。
伺服器端驗證 在輸入已傳送到伺服器後，由 Web 伺服器執行。
客戶端驗證 在輸入傳送到 Web 伺服器之前，由 Web 瀏覽器執行。
HTML 約束驗證
HTML5 引入了一個新的 HTML 驗證概念，稱為約束驗證。
HTML 約束驗證基於
- 約束驗證HTML輸入屬性
- 約束驗證CSS 偽類選擇器
- 約束驗證DOM 屬性和方法
約束驗證 HTML 輸入屬性
| Attribute | 描述 |
|---|---|
| disabled | 指定輸入元素應被停用 |
| max | 指定輸入元素的最大值 |
| 分鐘 | 指定輸入元素的最小值 |
| pattern | 指定輸入元素的值模式 |
| required | 指定輸入欄位需要一個元素 |
| type | 指定輸入元素的型別 |
有關完整列表，請訪問 HTML 輸入屬性。
約束驗證 CSS 偽類選擇器
| 選擇器 | 描述 |
|---|---|
| :disabled | 選擇指定了 "disabled" 屬性的輸入元素 |
| :invalid | 選擇值無效的輸入元素 |
| :optional | 選擇未指定 "required" 屬性的輸入元素 |
| :required | 選擇指定了 "required" 屬性的輸入元素 |
| :valid | 選擇值有效的輸入元素 |
有關完整列表，請訪問 CSS 偽類。
