使用Javascript验证电话号码 [英] Validating Phone Numbers Using Javascript

问题描述

我正在处理一个带有几个字段和提交按钮的Web表单。点击按钮后，我将验证是否填写了所需的文本框，并且电话号码格式正确。我只能接受7或10位数的电话号码，但是（，），（ - ）等字符是可以接受的。如果此框为空或电话号码格式不正确（不是7或10个数字，而不是数字），或者留空，我应该在文本框周围添加红色边框。这个边界应该保持原样，直到用户纠正错误。

我无法正常工作。我尝试了几种不同的方式去做这件事，但得到了几种不同类型的错误。一种方法似乎可行，但红色边框只显示一秒钟，然后消失，文本框中的值被重置。

这里是我的代码和我创建的jsfiddle的链接：

Javascript：

 < script type =text / javascript> 
函数validateForm（）{
 return checkPhone（）; 
} 
函数checkPhone（）{
 var phone = document.forms [myForm] [phone]。value; 
 var phoneNum = / ^ \（？（[0-9] {3}）\）？[ - 。 ]（[0-9] {3}）[？ - 。 ]（[0-9] {4}）$ /？; 
 if（phone.value.match（phoneNum））{
 return true; 
 
 else {
 document.getElementById（phone）。className = document.getElementById（phone）。className +error; 
返回false; 
} 
} 
< / script> 
  

HTML：

 < form name =myFormonsubmit =return validateForm（）> 
电话号码：< input type =textid =phone>< br> 
< / form> 
  

JSFiddle：

http://jsfiddle.net/mkdsjc0p/

解决方案

至于你的正则表达式，我猜它应该是

  ^ \ + {0,2}（ [\-\。]）？（\（？\d {0,3} \））？（[\-\。]）？\（？\d {0,3 } \）？（[\-\。]）？\d {3}（[\- \。]）？\d {4} 
  

但一般情况下，推定是不正确的，因为可能会输入类似
++ 44 20 1234 56789或+44（0）1234 567890
最好做这样的事情

  var phone = document.forms [myForm] [phone ]。值; 
 var phoneNum = phone.replace（/ [^ \d] / g，''）; 
 if（phoneNum.length> 6&& phoneNum.length< 11）{return true; } 
  

这将确保输入的值有7到10个数字，但是格式是。但是你必须考虑数字的最大长度可能超过10，如上面的示例。

I'm working on a web form with several fields and a submit button. When the button is clicked, I am to verify that the required text boxes have been filled in and that the phone number is in the correct format. I can only accept 7 or 10 digit phone numbers, but characters such as (,), (-), etc are acceptable. If this box is empty or the phone number isn't in the correct format (not 7 or 10 numbers long, not a number) or has been left blank, I am supposed to add a red border around the text box. This border is supposed to remain in place until the user corrects the error.

I can't get this to work properly. I have tried several different ways to go about doing this, but have gotten several different types of errors. One way seemed to work, but the red border only displayed for a second and then disappeared and the value in the textbox was reset.

Here is my code and a link to a jsfiddle I've created:

Javascript:

<script type="text/javascript">
    function validateForm() {
        return checkPhone();
    }
    function checkPhone() {
        var phone = document.forms["myForm"]["phone"].value;
        var phoneNum = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/; 
            if(phone.value.match(phoneNum)) {
                return true;
            }
            else {
                document.getElementById("phone").className = document.getElementById("phone").className + " error";
                return false;
            }
        }
</script>

HTML:

<form name="myForm" onsubmit = "return validateForm()">
    Phone Number: <input type="text" id="phone"><br>
</form>

JSFiddle:

http://jsfiddle.net/mkdsjc0p/

解决方案

As for your regexp I guess it should be

^\+{0,2}([\-\. ])?(\(?\d{0,3}\))?([\-\. ])?\(?\d{0,3}\)?([\-\. ])?\d{3}([\-\. ])?\d{4}

But in general the presumption is not correct because one might enter something like ++44 20 1234 56789 or [phone] it is better to do something like this

var phone = document.forms["myForm"]["phone"].value;
var phoneNum = phone.replace(/[^\d]/g, '');
if(phoneNum.length > 6 && phoneNum.length < 11) {  return true;  }

this will assure that entered value has 7 to 10 figures nevertheless what the formatting is. But you have to think about max length for number might be more than 10 as in the sample above.

这篇关于使用Javascript验证电话号码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！