详解Javascript手机号验证

一、基础验证

在进行手机号验证之前，我们需要了解手机号的基础知识：手机号一般是由 11 位数字组成，且以 13、14、15、17、18 开头，正常情况下手机号不会含有空格、破折号或其他特殊字符。因此我们可以通过正则表达式来实现手机号的基础验证。

function verifyPhoneNumber(phoneNumber) {
  var reg = /^1[34578]\d{9}$/;
  return reg.test(phoneNumber);
}

上面的代码中，我们通过正则表达式来验证手机号是否符合基本的格式，如果结果为 true，则说明手机号码是正确的，否则说明手机号码格式有误。

二、实时验证

基础验证只是验证了手机号码格式是否正确，但并不能保证这个号码是真实存在的。因此，我们需要实时验证手机号码是否可用。可以通过 Ajax 技术实现。

<input id="phoneNumber" type="text">
<div id="tip"></div>

<script>
var phoneNumberInput = document.getElementById("phoneNumber");
var tipDiv = document.getElementById("tip");
phoneNumberInput.oninput = function() {
  var phoneNumber = phoneNumberInput.value;
  if (verifyPhoneNumber(phoneNumber)) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        if (xhr.responseText == "true") {
          tipDiv.innerHTML = "该手机号可用";
        } else {
          tipDiv.innerHTML = "该手机号已被注册";
        }
      }
    }
    xhr.open("GET", "/checkPhoneNumber.php?phoneNumber=" + phoneNumber, true);
    xhr.send();
  }
}
</script>

上面的代码中，我们通过监听 phoneNumberInput 的 oninput 事件，当输入框内容有变化时触发事件。在事件处理函数中，首先通过基础验证判断手机号格式是否正确，然后发起 Ajax 请求，将手机号发送到服务器端进行验证，最后根据返回结果来修改 tipDiv 的内容。

三、深度验证

除了基础验证和实时验证之外，我们还需要进行深度验证来保证手机号码的合法性。深度验证包括以下内容：

1. 查询号段归属地：通过手机号码的前7位数字，可以得到该号码所属的区域。可以通过调用第三方的归属地查询接口来实现。

2. 运营商验证：可以通过手机号码前 3 位数字来判断该号码所属的运营商，如移动、联通、电信等。

3. 网络信誉验证：可以通过第三方的信誉验证接口来判断该手机号码是否存在欺诈行为或其他不良记录。

// 查询号段归属地
function getArea(phoneNumber) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var result = JSON.parse(xhr.responseText);
      console.log(result.data);
    }
  }
  xhr.open("GET", "http://apis.juhe.cn/mobile/get?phone=" + phoneNumber + "&key=XXXXX", true);
  xhr.send();
}

// 运营商验证
function getOperator(phoneNumber) {
  var operator = "";
  var firstThree = phoneNumber.substr(0, 3);
  switch (firstThree) {
    case "130":
    case "131":
    case "132":
    case "145":
    case "155":
    case "156":
    case "166":
    case "171":
    case "175":
    case "176":
    case "185":
    case "186":
      operator = "中国联通";
      break;
    case "133":
    case "149":
    case "153":
    case "173":
    case "177":
    case "180":
    case "181":
    case "189":
    case "199":
      operator = "中国电信";
      break;
    case "134":
    case "135":
    case "136":
    case "137":
    case "138":
    case "139":
    case "147":
    case "150":
    case "151":
    case "152":
    case "157":
    case "158":
    case "159":
    case "172":
    case "178":
    case "182":
    case "183":
    case "184":
    case "187":
    case "188":
      operator = "中国移动";
      break;
    default:
      operator = "未知运营商";
      break;
  }
  return operator;
}

// 网络信誉验证
function checkCredit(phoneNumber) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var result = JSON.parse(xhr.responseText);
      console.log(result.data);
    }
  }
  xhr.open("GET", "http://apis.juhe.cn/mobile/get?phone=" + phoneNumber + "&key=XXXXX", true);
  xhr.send();
}

上面的代码实现了查询号段归属地、运营商验证和网络信誉验证的功能。其中查询号段归属地和网络信誉验证使用了聚合数据提供的接口。

四、总结

本文从基础验证、实时验证、深度验证等多个方面详细阐述了 Javascript 手机号验证的方法和流程。需要注意的是，在实际应用中，我们需要根据实际需求进行相应的修改和完善，以保证手机号码的合法性和安全性。