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 流覽器不支持表單自動驗證。
數據驗證
數據驗證用於確保用戶輸入的數據是有效的。
典型的數據驗證有：
- 必需字段是否有輸入?
- 用戶是否輸入了合法的數據?
- 在數字字段是否輸入了文本?
大多數情況下，數據驗證用於確保用戶正確輸入數據。
數據驗證可以使用不同方法來定義，並通過多種方式來調用。
服務端數據驗證是在數據提交到伺服器上後再驗證。
客戶端數據驗證 side validation是在數據發送到伺服器前，在流覽器上完成驗證。
HTML 約束驗證
HTML5 新增了 HTML 表單的驗證方式：約束驗證（constraint validation）。
約束驗證是表單被提交時流覽器用來實現驗證的一種演算法。
HTML 約束驗證基於：
- HTML 輸入屬性
- CSS 偽類選擇器
- DOM 屬性和方法
約束驗證 HTML 輸入屬性
| 屬性 | 描述 |
|---|---|
| disabled | 規定輸入的元素不可用 |
| max | 規定輸入元素的最大值 |
| min | 規定輸入元素的最小值 |
| pattern | 規定輸入元素值的模式 |
| required | 規定輸入元素字段是必需的 |
| type | 規定輸入元素的類型 |
完整列表，請查看 HTML 輸入屬性。
約束驗證 CSS 偽類選擇器
| 選擇器 | 描述 |
|---|---|
| :disabled | 選取屬性為 "disabled" 屬性的 input 元素 |
| :invalid | 選取無效的 input 元素 |
| :optional | 選擇沒有"required"屬性的 input 元素 |
| :required | 選擇有"required"屬性的 input 元素 |
| :valid | 選取有效值的 input 元素 |
完整列表，請查看 CSS 偽類。