Html5 Phone 带括号的数字验证
Html5 Phone Number Validation with Parenthesis
非常简单的问题...如何在 html5 中验证这样的模式...
(562) 810-5566 或 (714) 433-4434
注意它将包含括号和 space。
我当前的输入控件是这样的。
<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 不工作。
您可以使用以下代码:
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]
。要匹配文字 \(
,您还可以使用字符 class:[(]
(与 )
相同:[)]
)。在字符 class 中,这些 (
和 )
失去了它们的 "special" 分组意义。
非常简单的问题...如何在 html5 中验证这样的模式...
(562) 810-5566 或 (714) 433-4434
注意它将包含括号和 space。
我当前的输入控件是这样的。
<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 不工作。
您可以使用以下代码:
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]
。要匹配文字 \(
,您还可以使用字符 class:[(]
(与 )
相同:[)]
)。在字符 class 中,这些 (
和 )
失去了它们的 "special" 分组意义。