JavaScript 表單

創(chuàng)新互聯(lián)公司長(zhǎng)期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為牧野企業(yè)提供專業(yè)的網(wǎng)站制作、成都做網(wǎng)站，牧野網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

HTML 表單驗(yàn)證可以通過 JavaScript 來完成。

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

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

。。。。。。

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

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

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

必需字段是否有輸入?

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

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

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

http://www.iis7.com/b/wzjk/

數(shù)據(jù)驗(yàn)證可以使用不同方法來定義，并通過多種方式來調(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í)瀏覽器用來實(shí)現(xiàn)驗(yàn)證的一種算法。

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

HTML 輸入屬性

CSS 偽類選擇器

DOM 屬性和方法

。。。。。。

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

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

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

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

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

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

type：規(guī)定輸入元素的類型

。。。。。。

約束驗(yàn)證 CSS 偽類選擇器：

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

:invalid：選取無效的 input 元素

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

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

:valid：選取有效值的 input 元素

::::::::::::::::::::::::::::::::::::::::::::::::::::

JavaScript 表單驗(yàn)證

JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。

表單數(shù)據(jù)經(jīng)常需要使用 JavaScript 來驗(yàn)證其正確性：

驗(yàn)證表單數(shù)據(jù)是否為空？

驗(yàn)證輸入是否是一個(gè)正確的email地址？

驗(yàn)證日期是否輸入正確？

驗(yàn)證表單輸入內(nèi)容是否為數(shù)字型？

::::::::::::::::::::::::::::::::::::::::::::

 JavaScript 驗(yàn)證 API

 約束驗(yàn)證 DOM 方法：

checkValidity()：如果 input 元素中的數(shù)據(jù)是合法的返回 true，否則返回 false。

setCustomValidity()：

設(shè)置 input 元素的 validationMessage 屬性，用于自定義錯(cuò)誤提示信息的方法。

使用setCustomValidity設(shè)置了自定義提示后，validity.customError就會(huì)變成true，則checkValidity總是會(huì)返回false。如果要重新判斷需要取消自定義提示，方式如下：

setCustomValidity('') 

setCustomValidity(null) 

setCustomValidity(undefined)

。。。。。。

約束驗(yàn)證 DOM 屬性：

validity ：布爾屬性值，返回 input 輸入值是否合法。

validationMessage：瀏覽器錯(cuò)誤提示信息。

willValidate：指定 input 是否需要驗(yàn)證。