屏蔽带有可选字母前缀的输入到电话号码格式 [英] Masking input with optional alphabet prefix to a phone number format

问题描述

我知道这个很好的jquery插件： http://digitalbush.com/projects/masked -input-plugin /
用于屏蔽输入，我可以很好地使用它。

假设我想要一个字段被屏蔽这种格式： [phone]
这很好，它正在工作。

问题是有时在这个领域内，我的用户也可以选择在数字前给出一些文本。

因此，对用户有效的两个输入是：

• +999 9 999 9999


• 任意可选字母和特殊字符（但不是数字！） +999 9 999 9999 ，

例如，这是一个有效的用户输入： [phone] 。

这也是一个有效的用户输入：电话号码：[phone] 。

我怎样制作这个面具？

编辑

对于第二种类型的输入，实际上可能只有有限数量的字母前缀，如下所示：

• 电话：[phone]
  
• 电话[phone]


• 电话号码[phone]


• 电话＃：[phone]


• 致电：[phone]


• 致电我：[phone]


• 致电+999 9 999 9999


• 电话[phone]


• 电话号码[phone]


• 电话：[phone]


• 对话+999 9 999 9999


• 联系人：[phone]


• 联络号码+999 9 999 9999


• 联络号码：[phone]
  

基本上，只是通常可能的方式告诉用户在给定的号码下打电话。对于这个问题，我们假设前缀只能是上面的单词。这意味着前缀的格式通常是 Call | Contact | Talk | Phone | Telephone ，可选＃，可选：。

整体掩码如下所示：
可选调用|联系我们|对话|电话|电话 可选＃ 可选： [phone]

解决方案

使用以下正则表达式：

  var phone_mask = / ^ [^ 0-9] * \ + 9 {3} \s9\s9 {3} \s9 { 4} $ /; 
 $ b phone_mask.test（Phone：[phone]）
 phone_mask.test（Phone [phone]）
 phone_mask.test（Phone＃ + 999 9 999 9999）
 phone_mask.test（Phone＃：[phone]）
 phone_mask.test（Call：[phone]）
 phone_mask。测试（Call me：[phone]）
 phone_mask.test（Call [phone]）
 phone_mask.test（Telephone [phone]）
 phone_mask.test（Telephone＃[phone]）
 phone_mask.test（Telephone：[phone]）
 phone_mask.test（Talk [phone]） 
 phone_mask.test（Contact：[phone]）
 phone_mask.test（Contact＃[phone]）
 phone_mask.test（Contact＃：[phone]）
  

以下是正则表达式的注释：

  var phone_mask = RegExp（^ [^ 0-9] */ *可选的非数字字符* / + 
\ \ + 9 {3}/ *后跟一个加号和三个九\\ * + 
 \\s9/ *后跟一个空格和一个九* / + 
\\s9 {3}/ *后跟一个空格和三个九* / + 
 \\ s9 {4}/ *后跟一个空格和四个九\\ * + + 
$）; 
  

I know of this nice jquery plugin: http://digitalbush.com/projects/masked-input-plugin/ for Masked input, and I can use it fine.

So let's say I want a field to be masked by this format: [phone] That's fine, and it's working.

The issue is that sometimes within the field, my users also have the option of giving some text before the number.

So the two inputs that are valid for a user are:

• [phone]
• any optional alphabet letters and special characters (but not digits!) [phone],

So for example, this is a valid user input: [phone].

And this is also a valid user input: Phone #: [phone].

How can I make this mask?

Edit

For the second type of input, there are actually a finite number of alphabetical prefixes possible, like these:

• Phone: [phone]
• Phone [phone]
• Phone # [phone]
• Phone #: [phone]
• Call: [phone]
• Call me: [phone]
• Call [phone]
• Telephone [phone]
• Telephone # [phone]
• Telephone: [phone]
• Talk [phone]
• Contact: [phone]
• Contact # [phone]
• Contact #: [phone]

Basically, just the usual possible ways of telling users to "call" at a given number. For this problem, let's assume the prefix can only be the above words. So that means the format for the prefix is usually Call|Contact|Talk|Phone|Telephone, optional #, optional :.

And the overall mask is something like: optional Call|Contact|Talk|Phone|Telephone optional # optional : [phone]

解决方案

Use the following regular expression:

var phone_mask = /^[^0-9]*\+9{3}\s9\s9{3}\s9{4}$/;

phone_mask.test("Phone: [phone]")
phone_mask.test("Phone [phone]")
phone_mask.test("Phone # [phone]")
phone_mask.test("Phone #: [phone]")
phone_mask.test("Call: [phone]")
phone_mask.test("Call me: [phone]")
phone_mask.test("Call [phone]")
phone_mask.test("Telephone [phone]")
phone_mask.test("Telephone # [phone]")
phone_mask.test("Telephone: [phone]")
phone_mask.test("Talk [phone]")
phone_mask.test("Contact: [phone]")
phone_mask.test("Contact # [phone]")
phone_mask.test("Contact #: [phone]")

Here is a commented breakdown of the regular expression:

var phone_mask = RegExp("^[^0-9]*"/* Optional non-numeric characters */ +
                        "\\+9{3}" /* Followed by a plus sign and three nines */ +
                        "\\s9"    /* Followed by a space and one nine */  +
                        "\\s9{3}" /* Followed by a space and three nines */ +
                        "\\s9{4}" /* Followed by a space and four nines */ +
                        "$");

这篇关于屏蔽带有可选字母前缀的输入到电话号码格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！