1.輸入型控件

Input type

用途

說明

email

電子郵件地址文本框

url

網(wǎng)頁URL文本框

number

數(shù)值的輸入域

屬性 值 描述

max number 規(guī)定允許的最大值

min number 規(guī)定允許的最小值

step number 規(guī)定合法的數(shù)字間隔(如果 step="3"，則合法的數(shù)是 -3,0,3,6 等)

value number 規(guī)定默認(rèn)值

range

特定值的范圍的數(shù)值，以滑動條顯示

屬性 值 描述

max number 規(guī)定允許的最大值

min number 規(guī)定允許的最小值

step number 規(guī)定合法的數(shù)字間隔(如果 step="3"，則合法的數(shù)是 -3,0,3,6 等)

value number 規(guī)定默認(rèn)值

Date pickers

日期，時間選擇器

僅Opera9+支持，包含date, month, week, time, datetime, datetime-local

search

用于搜索引擎，比如在站點頂部顯示的搜索框

與普通文本框用法一樣，只不過這樣更語文化

color

顏色選擇器

僅Opera支持

將原本type為text的input控件聲明為以上特殊類型，是為了給用戶呈現(xiàn)不同的輸入界面(移動平臺上支持這些不同的輸入界面，這里就不細(xì)說)，而且表單提交時會對其值做進(jìn)一步的驗證。下面展示這些新表單元素，請用支持這些表單元素的瀏覽器查看，IE對其支持最差。

E-mail:

date:

range:?number:??color:

2. 表單新特性和函數(shù)

2.1 placeholder

當(dāng)用戶還沒有輸入值時，輸入型控件可能通過placeholder向用戶顯示描述性說明文字或者提示信息，這在目前網(wǎng)站中很常見，一些JS框架都會提供類似功能，簡單的說下在舊版本中常用的解決方案，為輸入控件創(chuàng)建一個label，然后通過CSS控制些label的位置使之覆蓋在輸入控件上面，當(dāng)label獲得焦點時，瀏覽器會把焦點指向輸入控件。不過有了placeholder，新的瀏覽器就內(nèi)置了這一功能，其特性值會以淺灰色樣式顯示在輸入框中，當(dāng)輸入框獲得焦點并有值后，該提示信息自動消失。

如：

Runner:

2.2 autocomplete

其實在IE6中,autocomplete就已經(jīng)實現(xiàn)，不過現(xiàn)在這一特性終于標(biāo)準(zhǔn)化了，瀏覽器通過autocomplete特性能夠知曉是否應(yīng)該保存輸入值以備將來使用，autocomplete應(yīng)該用一保護(hù)用戶敏感數(shù)據(jù)，避免本地瀏覽器對它們進(jìn)行不安全的存儲。

類型

作用

on

該字段無需保護(hù)，值可以被保存和恢復(fù)

off

該字段需要保護(hù)，值不可以保存

unspecified

包含

的默認(rèn)設(shè)置，如果沒有被包含在表單中或沒有指定值，則行為表現(xiàn)為on

如：

當(dāng)用戶提交過一次表單后，再次訪問，name的輸入框會提示你曾輸入的值，而email則不會提示。

2.3 autofocus

頁面載入時，我們通過autofocus指定某個表單元素獲得焦點，但每個頁面只允許出現(xiàn)一個autofocus，如果設(shè)置多個則相當(dāng)于未指定些行為。目前Opera10,Chromet和Safari瀏覽器支持。如果用戶有希望焦點轉(zhuǎn)移的情況下，使用使用autofocus會惹惱用戶。

2.5 list特性和datalist

通過使用list，開發(fā)人員能夠為某個輸入型控件構(gòu)造一個選值列表，其使用方法：

Webpage:

請在Opera9+或Firefox10+瀏覽器中查看。

2.6 required

required 屬性規(guī)定必須在提交之前填寫輸入域(不能為空)。它是表單驗證最簡單的一種方式方法，使用方法：

2.7 pattern

pattern 屬性規(guī)定用于驗證 input 域的模式(pattern)，模式(pattern) 是正則表達(dá)式。那些type為email或url的輸入控件內(nèi)置相關(guān)正則表達(dá)式，如果value不符合其正則表達(dá)式，那表單將通不過驗證，無法提交。使用方法：

2.8 novalidate

novalidate 屬性規(guī)定在提交表單時不應(yīng)該驗證 form 或 input 域。

如：

3. 表單驗證

表單驗證是一套系統(tǒng)，它為終端用戶檢測無效的數(shù)據(jù)并標(biāo)記這些錯誤，是一種用戶體驗的優(yōu)化，讓web應(yīng)用更快的拋出錯誤，但它仍不能取代服務(wù)器端的驗證，重要數(shù)據(jù)還要要依賴于服務(wù)器端的驗證，因為前端驗證是可以繞過的。

目前任何表單元素都有八種可能的驗證約束條件：

名稱

用途

用法

valueMissing

確保控件中的值已填寫

將required屬性設(shè)為true，

typeMismatch

確保控件值與預(yù)期類型相匹配

patternMismatch

根據(jù)pattern的正則表達(dá)式判斷輸入是否為合法格式

toolong

避免輸入過多字符

設(shè)置maxLength，

rangeUnderflow

限制數(shù)值控件的最小值

設(shè)置min，

rangeOverflow

限制數(shù)值控件的最大值

設(shè)置max，

stepMismatch

確保輸入值符合min,max,step的設(shè)置

設(shè)置max min step，

customError

處理應(yīng)用代碼明確設(shè)置能計算產(chǎn)生錯誤

例如驗證兩次輸入的密碼是否一致，等會DEMO細(xì)說

下面展現(xiàn)瀏覽器自帶的驗證功能請在Chrome、Opera或Firefox中查看：

源代碼：

可是各個瀏覽器驗證行為不一致，我們可能需要統(tǒng)一其驗證行為，借助javascript我們可以統(tǒng)一瀏覽器的驗證行為。

還是以上上述HTML為基礎(chǔ)，我們?yōu)槠浼由舷嚓P(guān)javascript:

最后說下輸入兩次密碼匹配的驗證，寫的很簡單：

總結(jié)

以上是生活随笔為你收集整理的html5表单密码验证及提示,HTML5表单及其验证(示例代码)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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