INPUT 元素的 pattern 屬性

INPUT 元素有個 pattern 屬性接受一個規則運算式(regular expression)的格式規範,以其為基準,判斷是否使用者輸入的值符合指定的格式,如果沒有通過驗證,則不允許傳送資料,例如以下的文字方塊:


其中只允許使用者輸入 A~Z 的 26 個大寫字母中的任何一個字元,除此之外,其它的字元或是符號均不會被接受,此為最簡單的規則運算式。此文字方塊的 pattern 屬性值設定為 [A-Z] 如下:

<input pattern="[A-Z]" />

不符合 pattern 的資料進行傳送時,會出現警告訊息,如果要加入自訂的訊息,可以進一步設定 title 屬性,例如以下這個文字方塊:


其中的 title 提示訊息會在輸入值未通過驗證時顯示,相關設定如下:

<input pattern="[A-Z]" title="只接受單一大寫字母"/>

以下是另外一個 pattern 屬性設定實例:


其中設定了一個真實的信用卡卡號格式驗證,其中必須輸入四組由 4 個數字組成,並且以 – 分隔的資料(####-####-####-####),如果不是以此種格式輸入資料,會出現警告訊息。

以下為此設定內容:

<input  pattern="[0-9]{4}[-][0-9]{4}[-][0-9]{4}[-][0-9]{4}"
               title="#### - #### - #### - ####"/>


沒有留言: