使用Javascript验证电话号码

Question

我正在处理一个包含多个字段和提交按钮的Web表单.单击该按钮时,我将验证是否已填写所需的文本框,并且电话号码的格式是否正确.我只能接受7或10位数的电话号码,但是(,),( - )等字符是可以接受的.如果此框为空或电话号码格式不正确(不是7或10个数字,而不是数字)或者是空白,我应该在文本框周围添加红色边框.在用户纠正错误之前,此边界应保持不变.

我不能让它正常工作.我已经尝试了几种不同的方法来做这件事,但是已经有几种不同类型的错误.一种方法似乎工作,但红色边框只显示一秒钟然后消失,文本框中的值被重置.

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

使用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/

Answer 1

至于你的正则表达式,我想它应该是

^\+{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"].value;
var phoneNum = phone.replace(/[^\d]/g, '');
if(phoneNum.length > 6 && phoneNum.length < 11) {  return true;  }

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

Answer 2

function telephoneCheck(str) {
  var a = /^(1\s|1|)?((\(\d{3}\))|\d{3})(\-|\s)?(\d{3})(\-|\s)?(\d{4})$/.test(str);
  alert(a);
}
telephoneCheck("(555) 555-5555");

其中str可以是以下任何格式： 555-555-5555 (555)555-5555（555）555-5555 555 555 5555 5555555555 1 555 555 5555

Answer 3

试试这个我正在工作。

<form>
<input type="text" name="mobile" pattern="[1-9]{1}[0-9]{9}" title="Enter 10 digit mobile number" placeholder="Mobile number" required>
<button>
Save
</button>
</form>
 

https://jsfiddle.net/guljarpd/12b7v330/