應(yīng)用HMTL5原生的表單及輸入框?qū)傩裕?yàn)證表單內(nèi)容:
類型屬性
除了常用的text、password等外,HTML5新增的輸入類型,分別有:
類型 | 說明 |
---|---|
電子郵件地址輸入框 | |
url | 網(wǎng)址輸入框 |
number | 數(shù)值的輸入框;可設(shè)置min、max、step屬性 |
range | 特定值的范圍的數(shù)值,以滑動條顯示;可設(shè)置min、max、step屬性 |
search | 用于搜索引擎,比如在站點(diǎn)頂部顯示的搜索框 |
color | 顏色選擇器 |
date | 日期選擇器,同時(shí)包含month、week、time、datetime、datetime-local等類型 |
在原生的HTML5中,常用的表單及輸入框驗(yàn)證屬性有:
屬性名 | 說明 |
---|---|
placeholder | 在輸入框無內(nèi)容時(shí)顯示灰色提示 |
autofocus | 讓input自動獲取焦點(diǎn) |
required | 設(shè)置表單元素為必填 |
pattern | 表單驗(yàn)證使用正則 |
novalidate | 該屬性使用在form標(biāo)簽上,讓設(shè)置了驗(yàn)證的表單可以直接提交 |
formnovalidate | 該屬性使用在提交按鈕上,讓設(shè)置了驗(yàn)證的表單可以直接提交 |
multiple | 多個(gè)值,以逗號分隔。 |
autocomplete | 部分輸入框和form都可以設(shè)置自動提示 off關(guān)閉,on開啟(默認(rèn)是on) |
maxlength | 最大字符長度 |
list | 數(shù)據(jù)列表,與datalist配合使用 |
min | 最小值 |
max | 最大值 |
step | 數(shù)字間隔 |
驗(yàn)證方法
根據(jù)上表的輸入框類型和相關(guān)屬性結(jié)合,驗(yàn)證輸入內(nèi)容。
必填
給輸入框添加required屬性,則此輸入框?yàn)楸靥铐?xiàng)。
指定類型
指定輸入框type的類型值,如email、number等:
正則驗(yàn)證
在類型不滿足的條件的情況下,可使用pattern屬性,驗(yàn)證輸入內(nèi)容,pattern的值為正則驗(yàn)證。