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 偽類。