JavaScript 表單

JavaScript 表單驗(yàn)證

HTML 表單驗(yàn)證可以通過(guò) JavaScript 來(lái)完成。

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

JavaScript 實(shí)例

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

以上 JavaScript 代碼可以通過(guò) HTML 代碼來(lái)調(diào)用：

HTML 表單實(shí)例

名字:

嘗試一下 ?

JavaScript 驗(yàn)證輸入的數(shù)字

JavaScript 常用于對(duì)輸入數(shù)字的驗(yàn)證：

請(qǐng)輸入 1 到 10 之間的數(shù)字：

提交

嘗試一下 ?

HTML 表單自動(dòng)驗(yàn)證

HTML 表單驗(yàn)證也可以通過(guò)瀏覽器來(lái)自動(dòng)完成。

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

實(shí)例

嘗試一下 ?

Internet Explorer 9 及更早 IE 瀏覽器不支持表單自動(dòng)驗(yàn)證。

數(shù)據(jù)驗(yàn)證

數(shù)據(jù)驗(yàn)證用于確保用戶輸入的數(shù)據(jù)是有效的。

典型的數(shù)據(jù)驗(yàn)證有：

必需字段是否有輸入?

用戶是否輸入了合法的數(shù)據(jù)?

在數(shù)字字段是否輸入了文本?

大多數(shù)情況下，數(shù)據(jù)驗(yàn)證用于確保用戶正確輸入數(shù)據(jù)。

數(shù)據(jù)驗(yàn)證可以使用不同方法來(lái)定義，并通過(guò)多種方式來(lái)調(diào)用。

服務(wù)端數(shù)據(jù)驗(yàn)證是在數(shù)據(jù)提交到服務(wù)器上后再驗(yàn)證。

客戶端數(shù)據(jù)驗(yàn)證 side validation是在數(shù)據(jù)發(fā)送到服務(wù)器前，在瀏覽器上完成驗(yàn)證。

HTML 約束驗(yàn)證

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

約束驗(yàn)證是表單被提交時(shí)瀏覽器用來(lái)實(shí)現(xiàn)驗(yàn)證的一種算法。

HTML 約束驗(yàn)證基于：

HTML 輸入屬性

CSS 偽類(lèi)選擇器

DOM 屬性和方法

約束驗(yàn)證 HTML 輸入屬性

屬性

描述

disabled

規(guī)定輸入的元素不可用

max

規(guī)定輸入元素的最大值

min

規(guī)定輸入元素的最小值

pattern

規(guī)定輸入元素值的模式

required

規(guī)定輸入元素字段是必需的

type

規(guī)定輸入元素的類(lèi)型

約束驗(yàn)證 CSS 偽類(lèi)選擇器

選擇器

描述

:disabled

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

:invalid

選取無(wú)效的 input 元素

:optional

選擇沒(méi)有"required"屬性的 input 元素

:required

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

:valid

選取有效值的 input 元素

完整列表，請(qǐng)查看 CSS

偽類(lèi)。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。