问题描述
我正在处理一个带有几个字段和提交按钮的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：
^ \ + {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:
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 +44 (0) 1234 567890it 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验证电话号码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！