在 HTML 中使用 'pattern=' 时遇到问题答案

【问题标题】：Trouble in using 'pattern=' in HTML在 HTML 中使用 'pattern=' 时遇到问题
【发布时间】：2016-02-18 10:39:49
【问题描述】：

大家好！

我在不使用 css 或 javascript 的情况下使用模式输入属性时遇到问题。

这是我目前用于用户名的代码：

用户名必须仅包含 4 到 15 个字符

pattern="[A-Za-z0-9_]|.{4,15}"

问题是输入仍然接受像“*”这样的特殊字符

如何捕获这些特殊字符？

【问题讨论】：

用户名只能包含 4 到 15 个字符 - 然后只需使用 pattern="[A-Za-z0-9_]{4,15}" 甚至 pattern="\w{4,15}"，|. 会破坏所有这些，因为 . 匹配除换行符以外的任何字符.

【解决方案1】：

用户名只能由 4 到 15 个字符组成

然后只需使用pattern="[A-Za-z0-9_]{4,15}" 甚至pattern="\w{4,15}"（因为在JS 中[A-Za-z0-9_] = \w）。

|. 正在破坏模式，因为. 匹配除换行符之外的任何字符。 [A-Za-z0-9_]|.{4,15} 匹配一个单词字符串或包含 any 的字符串，字符出现 4 到 15 次。

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

<form name="form1"> 
 <input pattern="\w{4,15}" title="4 to 15 word characters are only allowed!"/>
 <input type="Submit"/> 
</form>

【讨论】：

它有效！但我有一个问题.. 当我应用 css 时，我的文本上的占位符变成红色.. 有没有办法先禁用 css，直到用户输入然后验证它？因为设计和css没有很好的结合。截图：i.imgur.com/ZJk4qan.png
我认为您可以删除该 CSS - 它仅用于测试目的（我只是将它用于演示）。点击提交后会出现 HTML5 验证错误。
电话号码怎么样？在我看来，如果我错了，请纠正我，这将需要一个数据库来检查前 4-5 位数字是否有效：就像在菲律宾，我们的国家代码是 63，这些是我们使用的一些有效电话号码：0906 或63906、0917 或 63917 等。这可能在 pattern="" 中吗？
抱歉，这听起来与当前问题无关。这里有很多电话验证问题，请检查。