JavaScript 表單
JavaScript 表單驗證
HTML 表單驗證可以通過 JavaScript 來完成。
以下例項程式碼用於判斷表單欄位(fname)值是否存在， 如果不存在，就彈出資訊，阻止表單提交：
JavaScript 例項
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要輸入名字。");
return false;
}
}
以上 JavaScript 程式碼可以通過 HTML 程式碼來呼叫：
HTML 表單例項
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
嘗試一下 ?
JavaScript 驗證輸入的數字
JavaScript 常用於對輸入數字的驗證：
請輸入 1 到 10 之間的數字：
嘗試一下 ?
HTML 表單自動驗證
HTML 表單驗證也可以通過瀏覽器來自動完成。
如果表單欄位 (fname) 的值為空, required 屬性會阻止表單提交：
例項
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
嘗試一下 ?
Internet Explorer 9 及更早 IE 瀏覽器不支援表單自動驗證。
資料驗證
資料驗證用於確保使用者輸入的資料是有效的。
典型的資料驗證有：
- 必需欄位是否有輸入?
- 使用者是否輸入了合法的資料?
- 在數字欄位是否輸入了文字?
大多數情況下，資料驗證用於確保使用者正確輸入資料。
資料驗證可以使用不同方法來定義，並通過多種方式來呼叫。
服務端資料驗證是在資料提交到伺服器上後再驗證。
客戶端資料驗證是在資料傳送到伺服器前，在瀏覽器上完成驗證。
HTML 約束驗證
HTML5 新增了 HTML 表單的驗證方式：約束驗證（constraint validation）。
約束驗證是表單被提交時瀏覽器用來實現驗證的一種演算法。
HTML 約束驗證基於：
- HTML 輸入屬性
- CSS 偽類選擇器
- DOM 屬性和方法
約束驗證 HTML 輸入屬性
| 屬性 | 描述 |
|---|---|
| disabled | 規定輸入的元素不可用 |
| max | 規定輸入元素的最大值 |
| min | 規定輸入元素的最小值 |
| pattern | 規定輸入元素值的模式 |
| required | 規定輸入元素欄位是必需的 |
| type | 規定輸入元素的型別 |
完整列表，請檢視 HTML 輸入屬性。
約束驗證 CSS 偽類選擇器
| 選擇器 | 描述 |
|---|---|
| :disabled | 選取屬性為 "disabled" 屬性的 input 元素 |
| :invalid | 選取無效的 input 元素 |
| :optional | 選擇沒有"optional"屬性的 input 元素 |
| :required | 選擇有"required"屬性的 input 元素 |
| :valid | 選取有效值的 input 元素 |
完整列表，請檢視 CSS 偽類。