2013-08-22 102 views
20

我在尝试验证电话号码,例如使用JavaScript的123-345-3456(078)789-8908。 这里是我的代码使用javascript验证电话号码

function ValidateUSPhoneNumber(phoneNumber) { 
    var regExp = /^(\([0-9]{3}\) |[0-9]{3}-)[0-9]{3}-[0-9]{4}/; 
    var phone = phoneNumber.match(regExp); 
    if (phone) { 
    alert('yes'); 
    return true; 
    } 
    alert('no'); 
    return false; 
} 

我测试使用ValidateUSPhoneNumber('123-345-34567')具有最后的连字符是按照正则表达式无效前5位的功能。但该函数返回true。 任何人都可以解释为什么?

+1

快速排队,是''''和下一个数字之间的空格吗? – Broxzier

回答

28

JavaScript来验证电话号码:

function phonenumber(inputtxt) { 
 
    var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/; 
 
    if(inputtxt.value.match(phoneno)) { 
 
    return true; 
 
    } 
 
    else { 
 
    alert("message"); 
 
    return false; 
 
    } 
 
}

上述脚本匹配:

XXX-XXX-XXXX
XXX.XXX.XXXX
XXX XXX XXXX

如果你想要使用下面的方法
+ XX-XXXX-XXXX
+ XX.XXXX.XXXX
+ XX XXXX XXXX
使用下面的代码数量前的+号:

function phonenumber(inputtxt) { 
    var phoneno = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/; 
    if(inputtxt.value.match(phoneno)) { 
    return true; 
    } 
    else { 
    alert("message"); 
    return false; 
    } 
} 
+0

欢迎您..感谢您的更正.. @Stano – coolprarun

+0

这将匹配'(123-456 7890'或'123).456-7890',我敢肯定这是通缉。 – Toto

+0

我无法理解你在做什么.. canu简单地解释@ M42 – coolprarun

0

在表达式的末尾添加单词边界\b

/^(\([0-9]{3}\) |[0-9]{3}-)[0-9]{3}-[0-9]{4}\b/ 

如果)后面的空格是可选的:

/^(\([0-9]{3}\)\s*|[0-9]{3}-)[0-9]{3}-[0-9]{4}\b/ 
+0

这个正则表达式也失败了'(078)789-8908'。在Andy的帖子中看到我的评论。 – Broxzier

+0

@Broxzier:请参阅我的编辑 – Toto

0

添加$的正则表达式的结束以表示样式结束:

var regExp = /^(\([0-9]{3}\)\s?|[0-9]{3}-)[0-9]{3}-[0-9]{4}$/; 
+1

由于空间原因,此错误对'(078)789-8908'不合格。你应该在那里添加一个'?'。 – Broxzier

+0

问题示例中没有空格,但我会修改我的答案。 – Andy

+0

你用空格验证了那些,而不是没有。 – Broxzier

22

此正则表达式/^(\([0-9]{3}\)\s*|[0-9]{3}\-)[0-9]{3}-[0-9]{4}$/验证所有的以下内容:

'123-345-3456'; 
'(078)789-8908'; 
'(078) 789-8908'; // Note the space 

要打破发生的事情:

Regular expression visualization

  1. 之初组后的验证方式有两种:(XXX)XXX-,与可选空间右括号。
  2. XXX-XXX
+1

它会匹配'(123-456-7890'或'123)456-7890',我不确定是否需要。 – Toto

+0

@ M42感谢您指出这一点,我更新了我的答案。 – Broxzier

1

任何一个可以解释为什么??

这种情况发生,因为你的正则表达式不与任何锚元字符结束,如线$年底或一个单词边界\b

所以,当你问的正则表达式引擎123-345-34567是否是有效的电话号码,它会尝试找到这个字符串中的匹配,因此它与这部分(\([0-9]{3}\) |[0-9]{3}-)匹配123-那么它匹配345-这一部分[0-9]{3}-然后将其与此相匹配3456部分[0-9]{4}

现在的引擎发现,它已经走过了整个正则表达式,发现你的里面输入一个字符串,正则表达式虽然性格留下匹配 - 输入字符串数7,所以停止和返回成功,因为它找到了一个匹配的子字符串。

如果你已经在你的正则表达式的末尾包括$\b,发动机走路一样,然后才尝试匹配$\b但发现最后一个数字- 7 -,这是不是一个字边界\b也不是行尾$因此它停止并且找不到匹配。

2

任何人都可以解释为什么

,因为你的正则表达式不匹配输入。只是输入还包含额外的字符。你包括'^'来表示行的开始,但是(正如Andy所说)你应该包含'$'来表示行结束。

如果你用'^'开始你的正则表达式并以'$'结尾,那么它只匹配只匹配你的正则表达式的行。

通过用'^'开始您的正则表达式,并且不以'$'结尾,您匹配以匹配您的正则表达式的序列开头的行,但是行可以具有任何跟踪匹配序列的行。

1

^(\(?[0-9]{3}\)?)((\s|\-){1})?[0-9]{3}((\s|\-){1})?[0-9]{4}$

假设你要验证美国的电话号码,这样就可以了。

首先,我们允许0或1开括号开始\(?

然后,我们允许3个连续的数字0-9之间[0-9]{3}

后,我们重复第一步和允许0或1的闭括号\)?

对于第二个分组,我们开始通过允许空间或连字符0或1次((\s|\-){1})?

这betw重复第二和第三组数字,我们检查3个连续的数字,然后连续四个数字结束它。对于美国的电话号码,我认为这涵盖了许多不同方式的基础,人们可以对这些电话号码进行格式化,但其限制性足以使他们无法传递不合理的字符串。

0

这是迄今为止我发现使用javascript正则表达式检查电话号码格式的最简单方法。这个特定的例子检查它是否是一个10位数字。

<input name="phone" pattern="^\d{10}$" type="text" size="50"> 

如果模式与值不匹配,则输入字段在单击提交按钮时被标记,不需要其他CSS或js。

0

function validatePhone(inputtxt) { 
 
    var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/; 
 
    return phoneno.test(inputtxt) 
 
}

0

如果您在使用上比这个码输入标签会帮助你。我自己编写这段代码,我认为这是在输入中使用的非常好的方法。但您可以使用您的格式进行更改。它将帮助用户更正输入标签上的格式。

$("#phone").on('input', function() { //this is use for every time input change. 
     var inputValue = getInputValue(); //get value from input and make it usefull number 
     var length = inputValue.length; //get lenth of input 

     if (inputValue < 1000) 
     { 
      inputValue = '1('+inputValue; 
     }else if (inputValue < 1000000) 
     { 
      inputValue = '1('+ inputValue.substring(0, 3) + ')' + inputValue.substring(3, length); 
     }else if (inputValue < 10000000000) 
     { 
      inputValue = '1('+ inputValue.substring(0, 3) + ')' + inputValue.substring(3, 6) + '-' + inputValue.substring(6, length); 
     }else 
     { 
      inputValue = '1('+ inputValue.substring(0, 3) + ')' + inputValue.substring(3, 6) + '-' + inputValue.substring(6, 10); 
     }  
     $("#phone").val(inputValue); //correct value entered to your input. 
     inputValue = getInputValue();//get value again, becuase it changed, this one using for changing color of input border 
     if ((inputValue > 2000000000) && (inputValue < 9999999999)) 
     { 
      $("#phone").css("border","black solid 1px");//if it is valid phone number than border will be black. 
     }else 
     { 
      $("#phone").css("border","red solid 1px");//if it is invalid phone number than border will be red. 
     } 
    }); 

    function getInputValue() { 
     var inputValue = $("#phone").val().replace(/\D/g,''); //remove all non numeric character 
     if (inputValue.charAt(0) == 1) // if first character is 1 than remove it. 
     { 
      var inputValue = inputValue.substring(1, inputValue.length); 
     } 
     return inputValue; 
}