简体   繁体   English

我正在尝试使用javascript验证电话号码

[英]I'm trying to form validate a phone number with a javascript

I'm trying to validate a phone number. 我正在尝试验证电话号码。 This doesn't seem to work though. 不过,这似乎不起作用。 Why doesn't this work? 为什么不起作用?

<html>
<head>
<script>
    function validateForm() {
        var phone1 = document.forms["myForm"]["phone"].value;
        var phone2 = ^(\+0?1\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$;

        if ( phone1.value.match(phone2) ){
            return true;
        }else{
            alert("Please enter a valid phone number");
            return false;
        }   
    }
</script>
</head>
<body>

<form name="myForm"
onsubmit="return validateForm()" method="post">

    <label for="phone">Phone:</label><input name="phone" id="phone" value=""    placeholder="Zip..." type="text" onsubmit="return validateForm()"/>

<button type="submit">Submit</button>

</form>

</body>
</html>

It definitely has something to do with the value comparison in the if statement, I just can't figure out how to accurately do this. 它肯定与if语句中的值比较有关,我只是想不出如何准确地做到这一点。

var phone2 = ^(\+0?1\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$;

it's a wrong syntax for regexes in JavaScript, it should be JavaScript中的正则表达式语法错误,应该是

var phone2 = /^(\+0?1\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$/;

Also, you're getting field's value twice: 而且,您两次获得字段的值:

var phone1 = document.forms["myForm"]["phone"].value;
//                                             ^
...
if (phone1.value.match(phone2)) {
//         ^ `value` property here is not defined

See this jsfiddle with fixed code. 请参阅带有固定代码的jsfiddle

Your pattern RegExp , base on your pattern validation phone number is following way you should validate. 您的模式RegExp基于您的模式验证电话号码,是按照您应验证的方式进行的。

View LIVE 观看实况

JS JS

function validateForm() {
    var re = /^(\+0?1\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$/; 
    var phone1 = document.forms["myForm"]["phone"].value;
    var m = re.exec(phone1);
    if (m && m[0]){
        return true; 
    }else{
        alert("Please enter a valid phone number");
        return false;
    }
 }

HTML 的HTML

<form name="myForm" onsubmit="return validateForm()" method="post">
    <label for="phone">Phone:</label>
    <input name="phone" id="phone" value="" placeholder="Zip..." type="text" onsubmit="return validateForm()" />
    <button type="submit">Submit</button>
</form>

Use should use RegExp Pattern 使用时应使用RegExp模式

^((\+?)(1?(\-?)?))(\d{3})(-|\s)?\d{3}(-|\s)?\d{4}$

在此处输入图片说明

Users tend to enter details in a textbox the way they like. 用户倾向于按自己喜欢的方式在文本框中输入详细信息。 It is an annoying experience if the form resticts them from entering the details in a specific fashion in a textbox. 如果表单阻止他们以特定方式在文本框中输入详细信息,这将是一个令人讨厌的体验。 Its better to generalize your regex for such patterns. 最好将您的正则表达式概括为此类模式。 @sainaen has pointed out the errors already but your regex can still fail in the following cases. @sainaen已经指出了错误,但在以下情况下,您的正则表达式仍会失败。

  +1-234-123-1234
  +1234-123-1234
  +1234123-1234
  +12341231234
  2341231234 
  434-123-1234   //with a space in the end or beginning 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM