如何在 TextBox 中创建模式？答案

【问题标题】：how to create patterns in TextBox?如何在 TextBox 中创建模式？
【发布时间】：2016-11-08 10:35:41
【问题描述】：

注意事项：我厌倦了所有与此主题相关的问题和答案。赞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

【问题讨论】：

标签： javascript jquery html pattern-matching

【解决方案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>

【讨论】：

感谢您的回答。但我添加了类似 WWW.TEST.COM 的文本，然后出现错误
是的，因为正则表达式默认区分大小写，并且您不能在 HTML5 模式属性中使用修饰符。您将不得不使用字符类。
太棒了。谢谢@Wiktor Stribiżew