1092浏覽量

html5表單原生(shēng)驗證類型屬性方法

來源: 時間:2020-09-07

應用HMTL5原生(shēng)的表單及輸入框屬性,驗證表單内容:

類型屬性

除了常用的textpassword等外(wài),HTML5新增的輸入類型,分(fēn)别有:

類型 說明
email 電(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的類型值,如emailnumber等:

正則驗證

在類型不滿足的條件的情況下(xià),可使用pattern屬性,驗證輸入内容,pattern的值爲正則驗證。

聯系我(wǒ)們

一(yī)次需求提交或許正是成就一(yī)個出色産品的開(kāi)始。
歡迎填寫表格或發送合作郵件至: qczsky@126.com

大(dà)理青橙科技

電(diàn)話(huà):13988578755 13988578755

郵箱:qczsky@126.com

地址:大(dà)理市下(xià)關龍都春天10層