HTML5新增的表單驗證功能

2022-09-14 06:15:11 字數 2828 閱讀 7815

html5 表單增加了許多內建的控制項和控制項屬性

xhtml 中需要放在 form 之中的諸如 input/button/select/textarea 等標籤元素,在 html 5 中完全可以放在頁面任何位置,並通過新增的 form 屬性指向元素所屬表單的 id 值,即可關聯起來。

email輸入型別:

要求輸入格式正確的 email 位址,否則瀏覽器不允許提交,同時會提示錯誤資訊

url輸入型別:

要求輸入格式正確的 url 位址,opera 中會自動在開始處新增 http://

目前 ms 只有

opera/chrome 新版本支援,且展示效果也不一樣

number輸入型別:

要求輸入格式正確的數字

range型別:

顯示乙個可拖動的滑塊條,通過設定 max/min/step 值限定拖動範圍,拖動時會反饋給value乙個值

search輸入型別:

輸入乙個搜尋關鍵字,通過 results=s 可顯示乙個搜尋小圖示

tel輸入型別:

要求輸入乙個**號碼,但實際上並沒有特殊的驗證,與 text 型別沒什麼區別

color輸入型別:

可讓使用者通過顏色選擇器選擇乙個顏色值,並反饋到value中

placeholder屬性

實現點選清除表單初始值,ms 除了 firefox,其他標

準瀏覽器都能很好的支援

require/pattern屬性

表單驗證屬性require 型別時,若輸入值為空,則拒絕提交並出現提示,注意在 opera 中必須指定 name 值,否則無效果。

autofocus屬性

預設聚焦屬性,可在頁面載入時聚焦到乙個表單控制項,類似於 js 的 focus()

list屬性

<

input

type

="text"

list

="ilist"

>

<

datalist

id="ilist"

>

<

option

label

="a"

>

option

>

<

option

label

="b"

>

option

>

<

option

label

="c"

>

option

>

datalist

>

input

>

需要與datalist屬性共用,datalist是對選擇框的記憶,而list屬性可以為選擇框自定義記憶的內容

max/min/step屬性

限制值的輸入範圍,以及值的輸入漸進程度,比如可在 number 設定輸入最大值最小值,或在 range 中設定拖動階梯

autocomplete屬性

此屬性是為表單提供自動完成功能,如果該屬性為開啟狀態可很好地自動完成,一般來說,此屬性必須啟動瀏覽器的自動完成功能

data屬性

html5 支援 data 屬性,為 select 控制項外聯資料來源,可以在 select 下拉別表動態的新增來自資料庫的各組選項, 比如說國家、省市列表等等。

xml submission編碼格式

HTML5新增表單驗證

html5新增屬性 屬性描述 placeholder 提供一種提示,輸入域為空時顯示,獲得焦點輸入內容後消失 required 規定輸入域不能為空 pattern 規定驗證input域的模式 正規表示式 示例 validity屬性 validitystate物件 屬性描述 valuemissing ...

HTML5表單驗證

在網上搜尋表單驗證,大多數都是js寫的,比較複雜。但是翻閱了html5的新標籤之後,發現html5原生支援對正規表示式 非空的檢測,即pattern,required標籤。如下即可實現該輸入框非空,且是正整數 不過在提交表單時,如果輸入框不合規範,預設的提示並不友好,如果想要更改預設的提示,需要加入...

html5表單自動驗證

在html5 中,在增加了大量的表單元素與屬性的同時,也增加了大量在提交時對表單與表單內新增元素進行內容有效性驗證的功能,接下來我們來講一下自動驗證。在html5中,通過對元素使用屬性的方法,可以實現在表單提交時執行自動驗證的功能,在執行 後,將在表單提交時自動驗證輸入的內容是否為數字,如果驗證通不...