1.輸入型控件

Input type

用途

說明

email

電子郵件地址文本框

url

網頁URL文本框

number

數值的輸入域

屬性 值 描述

max number 規定允許的最大值

min number 規定允許的最小值

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

value number 規定默認值

range

特定值的范圍的數值，以滑動條顯示

屬性 值 描述

max number 規定允許的最大值

min number 規定允許的最小值

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

value number 規定默認值

Date pickers

日期，時間選擇器

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

search

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

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

color

顏色選擇器

僅Opera支持

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

E-mail:

date:

range:?number:??color:

2. 表單新特性和函數

2.1 placeholder

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

如：

Runner:

2.2 autocomplete

其實在IE6中,autocomplete就已經實現，不過現在這一特性終于標準化了，瀏覽器通過autocomplete特性能夠知曉是否應該保存輸入值以備將來使用，autocomplete應該用一保護用戶敏感數據，避免本地瀏覽器對它們進行不安全的存儲。

類型

作用

on

該字段無需保護，值可以被保存和恢復

off

該字段需要保護，值不可以保存

unspecified

包含

的默認設置，如果沒有被包含在表單中或沒有指定值，則行為表現為on

如：

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

2.3 autofocus

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

2.5 list特性和datalist

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

Webpage:

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

2.6 required

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

2.7 pattern

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

2.8 novalidate

novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。

如：

3. 表單驗證

表單驗證是一套系統，它為終端用戶檢測無效的數據并標記這些錯誤，是一種用戶體驗的優化，讓web應用更快的拋出錯誤，但它仍不能取代服務器端的驗證，重要數據還要要依賴于服務器端的驗證，因為前端驗證是可以繞過的。

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

名稱

用途

用法

valueMissing

確保控件中的值已填寫

將required屬性設為true，

typeMismatch

確保控件值與預期類型相匹配

patternMismatch

根據pattern的正則表達式判斷輸入是否為合法格式

toolong

避免輸入過多字符

設置maxLength，

rangeUnderflow

限制數值控件的最小值

設置min，

rangeOverflow

限制數值控件的最大值

設置max，

stepMismatch

確保輸入值符合min,max,step的設置

設置max min step，

customError

處理應用代碼明確設置能計算產生錯誤

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

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

源代碼：

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

還是以上上述HTML為基礎，我們為其加上相關javascript:

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

總結

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

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