JavaScript 表單

JavaScript 表單驗證

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

以下實例代碼用于判斷表單字段(fname)值是否存在， 如果不存在，就彈出信息，阻止表單提交：

JavaScript 實例

functionvalidateForm(){varx=document.forms["myForm"]["fname"].value;if(x==null||x==""){alert("需要輸入名字。");returnfalse;}}

以上 JavaScript 代碼可以通過 HTML 代碼來調用：

HTML 表單實例

名字:

嘗試一下 ?

JavaScript 驗證輸入的數字

JavaScript 常用于對輸入數字的驗證：

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

提交

嘗試一下 ?

HTML 表單自動驗證

HTML 表單驗證也可以通過瀏覽器來自動完成。

如果表單字段 (fname) 的值為空, required 屬性會阻止表單提交：

實例

嘗試一下 ?

Internet Explorer 9 及更早 IE 瀏覽器不支持表單自動驗證。

數據驗證

數據驗證用于確保用戶輸入的數據是有效的。

典型的數據驗證有：

必需字段是否有輸入?

用戶是否輸入了合法的數據?

在數字字段是否輸入了文本?

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

數據驗證可以使用不同方法來定義，并通過多種方式來調用。

服務端數據驗證是在數據提交到服務器上后再驗證。

客戶端數據驗證 side validation是在數據發送到服務器前，在瀏覽器上完成驗證。

HTML 約束驗證

HTML5 新增了 HTML 表單的驗證方式：約束驗證(constraint validation)。

約束驗證是表單被提交時瀏覽器用來實現驗證的一種算法。

HTML 約束驗證基于：

HTML 輸入屬性

CSS 偽類選擇器

DOM 屬性和方法

約束驗證 HTML 輸入屬性

屬性

描述

disabled

規定輸入的元素不可用

max

規定輸入元素的最大值

min

規定輸入元素的最小值

pattern

規定輸入元素值的模式

required

規定輸入元素字段是必需的

type

規定輸入元素的類型

約束驗證 CSS 偽類選擇器

選擇器

描述

:disabled

選取屬性為 "disabled" 屬性的 input 元素

:invalid

選取無效的 input 元素

:optional

選擇沒有"required"屬性的 input 元素

:required

選擇有"required"屬性的 input 元素

:valid

選取有效值的 input 元素

完整列表，請查看 CSS

偽類。

總結

以上是生活随笔為你收集整理的js html form,JavaScript 表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。