我如何在 HTML 文本输入中使用正则表达式模式来验证电话号码

Question

我的号码格式如下图：

1. 775645645（9位）

2. 0775645645（10位数字）

3. +94775645645

数字可以以 7 或 0 或 +94 开头。

所以我在 HTML 文本输入中尝试使用正则表达式模式，如下所示：

<input type="text" name="mobile" class="form-control" pattern ="(?:7|0|(?:\+94))[0-9]{9,10}$" required />

但是这种模式对我不起作用。 感谢你的帮助。

更新：

我在这里使用 jQuery 验证来验证前端表单。

Answer 1

您可以使用

pattern="(?:7|0\d|\+94\d)\d{8}"

请参阅正则表达式演示。 它将被编译成类似^(?:(?:7|0\d|\+94\d)\d{8})$的模式并将匹配

• ^(?: - 字符串的开始和非捕获组的开始
• (?:7|0\d|\+94\d) - 7或0和一个数字或+94和一个数字
• \d{8} - 八位数字
• )$ - 组结束，字符串结束。

请参阅下面的演示：

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

 <form> <input type="text" name="mobile" class="form-control" pattern="(?:7|0\d|\+94\d)\d{8}" required /> <input type="Submit"/> </form>

Answer 2

可以试试这个希望它有帮助

• 如果以7开头，长度必须是9位
• 如果以0开头，则长度必须为10位
• 如果以+94开头，则长度必须为12位

 input:not(:placeholder-shown):invalid{ background-color:pink; box-shadow:0 0 0 2px red; }

 <input type="text" name="mobile" class="form-control" placeholder="Phone number" pattern ="(7[0-9]{8}|0[0-9]{9}|\+94[0-9]{9})$" required />

Answer 3

如果您正在寻找仅适用于您的示例的正则表达式模式，请尝试以下操作：

(?:(?:7|0[1-9]{1})|(?:\+94))[0-9]{8}

• 7|0[1-9]{1}接受 7 或 0 以及 1-9 之间的另一个数字
• 的| 用于表示“或”条件
• \+94接受 +94 作为 3 个起始数字
• [0-9]{8}表示 0 到 9 之间的其他 8 个数字

如果您正在寻找一种适用于各种电话号码模式的模式，您可以试试这个：

^[+]?[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$

这是如何工作的：

• ^代表字符串的开头
• [+]? 对于开头包含“+”的电话号码
• [(]{0,1}表示开头的“(”。对于包含(###)的电话号码。示例：(222)333-333
• [0-9]{1,4}代表“(###)”之间的数字
• [)]{0,1}代表结尾的“)”
• [-\s\./0-9]*这将允许电话号码被接受，即使号码使用“-”或“”或“.”分开。
• $代表字符串结束

检查这个网站： https://regexr.com/