2

非常简单的问题......我如何在 html5 中验证这样的模式......

(562) 810-5566 或 (714) 433-4434

请注意，它将包含括号和空格。

我当前的输入控件看起来像这样。

<input type="tel" data-tel-msg="Invalid Phone Number!" class="k-textbox" pattern="^\d{3}-\d{3}-\d{4}$" required />

我知道当前模式匹配 3334445555，但它不是我想要的，当我尝试添加括号时，javascript 控制台只是给出了一个错误，不正确的正则表达式语法。在此处需要有关语法的帮助。

另外作为奖励，如果您知道如何让它显示自定义错误消息，这也会有所帮助。目前我的 data-tel-msg 不工作。

4

1 回答 1

4

您可以使用以下代码：

input:valid {
  color: green;
}
input:invalid {
  color: red;
}
<form name="form1">
 <input value="(555) 324-5643" type="tel" title="Invalid Phone Number!" class="k-textbox" pattern="[(][0-9]{3}[)] [0-9]{3}-[0-9]{4}" required />
 <input type="Submit"/> 
</form>

正则表达式\(\d{3}\)\s\d{3}-\d{4}匹配(###) ###-####格式中的字符串，因为 HTML5 模式默认锚定（到字符串的开头和结尾）。

该title属性允许显示错误文本。

如果反斜杠在您的环境中丢失，只需将它们加倍，或替换\d为[0-9]. 要匹配文字\(，您还可以使用字符类：（[(]与):相同[)]）。在一个字符类内部，这些(并)失去了它们的“特殊”分组意义。

于 2016-01-25T09:47:28.463 回答