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