詳解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 手機號驗證的方法和流程。需要注意的是，在實際應用中，我們需要根據實際需求進行相應的修改和完善，以保證手機號碼的合法性和安全性。