html5表單自動驗證

2021-07-25 23:11:36 字數 1526 閱讀 8274

在html5 中,在增加了大量的表單元素與屬性的同時,也增加了大量在提交時對表單與表單內新增元素進行內容有效性驗證的功能,接下來我們來講一下自動驗證。

在html5中,通過對元素使用屬性的方法,可以實現在表單提交時執行自動驗證的功能,在執行**後,將在表單提交時自動驗證輸入的內容是否為數字,如果驗證通不過,將顯示錯誤資訊文字。

lang="en">

charset="utf-8">

表單驗證示例title>

head>

接下來我們來看一下在html5 中追加的關於對元素內輸入內容進行限制的屬性的指定。

1.required屬性

html5 中新增的required屬性可以應用在大多數輸入元素上(除了隱藏元素,元素按鈕上)。在提交時,如果元素中內容為空白。則不允許提交,同時在瀏覽器中顯示資訊提示文字,提示使用者這個元素中必須輸入內容,效果如圖

2.pattern屬性

之前提到的新增的input元素,比如email,number,url等,要求輸入內容符合一定的格式,對input元素使用pattern屬性,並且將屬性值設定為某個格式的正規表示式,在提交時會檢查其內容是否符合給定格式。當輸入的內容不符合給定格式時,則不允許提交,同時在瀏覽器中顯示資訊提示文字,提交輸入的內容必須符合給定格式,**如下,要求輸入內容為乙個數字與3個大寫字母:

lang="en">

charset="utf-8">

表單驗證示例title>

head>

執行效果如下:

3.min屬性與max屬性

min與max這兩個屬性是日期型別或數值型別的input元素的專用屬性,他們限制了在input元素中輸入的數值與日期的範圍。

lang="en">

charset="utf-8">

表單驗證示例title>

head>

執行效果如下:

4.step屬性

step屬性控制input元素中的值增加過減少時的步驟。例如當你想讓使用者輸入的值在0與100之間,但必須是5的倍數時,你可以指定step為5,**如下:

lang="en">

charset="utf-8">

表單驗證示例title>

head>

效果如下:

HTML5表單自動驗證總結

1.required required屬性表示此輸入框是必填項,當提交的時候,如果此輸入框為空,那麼將提示使用者輸入後提交,預設值是true。required用於檢查表單控制項非空 2.pattern pattern屬性的值一般為正規表示式,當使用者輸入的內容符合正規表示式的格式,才能提交,否則提示...

HTML5表單驗證

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

HTML5新增表單驗證

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