电话号码验证

JavaScript：HTML表单 - 电话号码验证

电话号码验证

验证电话号码是验证HTML表单时的重要环节。本文探讨了如何使用JavaScript验证不同格式的电话号码：
首先，我们验证一个不含逗号、空格、标点符号且不带+号的10位电话号码。该验证过程将移除所有非数字字符，仅允许包含10位数字的电话号码。以下是该函数。

function phonenumber(inputtxt)
{
  var phoneno = /^\d{10}$/;
  if((inputtxt.value.match(phoneno))
        {
      return true;
        }
      else
        {
        alert("message");
        return false;
        }
}

执行一下

Flowchart:

验证类似以下格式的电话号码
XXX-XXX-XXXX
XXX.XXX.XXXX
XXX XXX XXXX
使用以下代码。

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;
        }
}

执行一下

Flowchart:

若要在数字前显示加号，请按如下方式操作：
+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;
        }
}

执行一下

Flowchart:

以下代码块包含上述各验证功能的具体实现代码。所有验证功能均保持了CSS代码部分的通用性。

CSS代码

 li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}

执行一下

验证10位电话号码

首先验证一个10位电话号码。例如：1234567890、0999990011、8888855555等。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />      
</head><body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input an Phone No.[xxxxxxxxxx] and Submit</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li>&nbsp;</li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="phonenumber(document.form1.text1)"/></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="phoneno-all-numeric-validation.js"></script>
</body>
</html>

执行一下

JavaScript代码

function phonenumber(inputtxt)
{
  var phoneno = /^\d{10}$/;
  if(inputtxt.value.match(phoneno))
  {
      return true;
  }
  else
  {
     alert("Not a valid Phone Number");
     return false;
  }
  }

执行一下

在浏览器中查看示例

Flowchart:

验证北美电话号码

现在，我们来看看如何验证电话号码格式，包括 222-055-9034、321.789.4512 或 123 256 4587 三种形式。

HTML代码

<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />      
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input an Phone No.[xxx-xxx-xxxx, xxx.xxx.xxxx, xxx xxx xxxx] and Submit</h2>
<form name="form1" action="#"> 
<ul>
<li><input type='text' name='text1'/></li>
<li>&nbsp;</li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="phonenumber(document.form1.text1)"/></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="phoneno-international-format.js"></script>
</body>
</html>

执行一下

JavaScript代码

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

执行一下

在浏览器中查看示例

Flowchart:

验证带有国家代码的国际电话号码

现在，我们来看看如何验证带国家代码的电话号码，其格式包括：+24-0455-9034、+21.3789.4512 或 +23 1256 4587 等形式。

HTML代码

<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>

<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input an Phone No.[+xx-xxxx-xxxx, +xx.xxxx.xxxx, +xx xxxx xxxx] and Submit</h2>
<form name="form1" action="#"> 
<ul>
<li><input type='text' name='text1'/></li>
<li>&nbsp;</li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="phonenumber(document.form1.text1)"/></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="phoneno-+international-format.js"></script>
</body>
</html>

执行一下

JavaScript代码

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

执行一下

在浏览器中查看示例

Flowchart:

file_download从此处下载验证码。

其他JavaScript验证：

上一篇：使用JavaScript实现注册表单的字段级表单验证
下一篇：JavaScript：HTML表单 - 信用卡号码验证

JavaScript

JavaScript 入门教程

电话号码验证

JavaScript：HTML表单 - 电话号码验证

电话号码验证