如何在TextBox中創建模式？

Question

評論：我累了所有的問題&回答相關此主題。像This

我用簡單的形式使用URL文本框我使用模式pattern="https?://.+"完美的工作。

我想允許文本（小&大寫）像

1. www.test.com 
2. https://www.test.com 
3. https://test.com 
4. WWW.TEST.COM 
5. HTTPS://WWW.TEST.COM* 
6. HTTP://TEST.COM 

我嘗試代碼：

<input name="website" id="website" type="text" class="Custom_textbox" pattern="https?://.+"/> 

注：只有使用模式試圖解決我的問題。 不是其他腳本

我的代碼Here

Answer 1

您可以使用交替這樣的：

pattern="(www\.|https?://).+" 
     ^ ^  ^

不區分大小寫的版本：

pattern="([wW][wW][wW]\.|[hH][tT][tT][Pp][sS]?://).+" 

見regex demo。請注意，在限制量詞的幫助下，可以縮短不區分大小寫的版本：pattern="([wW]{3}\.|[hH][tT]{2}[Pp][sS]?://).+"。

它將接受以www.或http://或https://開頭的任何輸入。

input:valid { 
 
    color: black; 
 
} 
 
input:invalid { 
 
    color: red; 
 
}

<form name="form1"> 
 
    <input name="website" id="website" type="text" class="Custom_textbox" 
 
    pattern="([wW][wW][wW]\.|[hH][tT][tT][Pp][sS]?://).+" 
 
    title="Please valid url" required/> 
 
    <input type="Submit"/> 
 
</form>