如何在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>