最新的Web開發教程
 

HTML <input> pattern Attribute

<HTML <input>標籤

與輸入域的HTML表單只能包含三個字母(無數字或特殊字符):

<form action="demo_form.asp">
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
試一試»

更多“試一試”的例子。


定義和用法

pattern屬性指定正則表達式<input>元素的值與檢驗。

注:該pattern屬性適用於以下輸入類型: text, date, search, url, tel, emailpassword

提示:使用全球title屬性來描述的模式,以幫助用戶。

提示:了解更多關於正則表達式我們的JavaScript教程。


瀏覽器支持

在表中的數字指定完全支持屬性所述第一瀏覽器的版本。

屬性
pattern 5 10.0 4 不支持 9.6

HTML 4.01和HTML5之間的差異

pattern屬性,HTML5是新的。


句法

<input pattern="regexp">

屬性值

描述
regexp 正則表達式的<input>元素的值與檢驗

更多示例

一個<input>元素與type="password" ,它必須包含6個或更多字符:

<form action="demo_form.asp">
Password: <input type="password" name="pw" pattern=".{6,}" title="Six or more characters">
<input type="submit">
</form>
試一試»

一個<input>元素與type="password" ,它必須包含8個或更多字符至少有一個數字,一個大寫和小寫字母:

<form action="demo_form.asp">
Password: <input type="password" name="pw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
<input type="submit">
</form>
試一試»

一個<input>與元素type="email"那一定是按以下順序: 字符 @ 字符 (字符後跟一個@符號,其次是更多的字符,然後一個"."

"." 簽字,你只能寫從2〜3個字母A到Z:

<form action="demo_form.asp">
E-mail: <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
<input type="submit">
</form>
試一試»

一個<input>與元素type="search"不能包含下列字符: '"

<form action="demo_form.asp">
Search: <input type="search" name="search" pattern="[^'\x22]+" title="Invalid input">
<input type="submit">
</form>
試一試»

一個<input>與元素type="url"必須與啟動http://https://後面至少一個字符:

<form action="demo_form.asp">
Homepage: <input type="url" name="website" pattern="https?://.+" title="Include http://">
<input type="submit">
</form>
試一試»

<HTML <input>標籤