例
與輸入域的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, email和password 。
提示:使用全球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>
試一試»