JavaScript手機號校驗

一、js手機號校驗代碼

function validatePhoneNumber(phoneNumber) {
  if (phoneNumber.length !== 11) {
      return false;
  }
  var reg = /^1\d{10}$/;
  return reg.test(phoneNumber);
}

手機號碼的位數為11位，因此可以先進行長度驗證。然後通過正則表達式判斷是否為手機號。這裡使用了以1開頭，後面跟10個數字的正則表達式來進行驗證。如果驗證通過則返回true，否則返回false。

二、js手機號正則校驗

function validatePhoneNumber(phoneNumber) {
  var reg = /^1\d{10}$/;
  return reg.test(phoneNumber);
}

正則表達式是驗證手機號碼的最常用方法。上面的代碼中，/^1\d{10}$/表示以1開頭後面跟10個數字的模板。其中^表示開頭，$表示結尾。 \d是匹配任意數字的符號。{10}是匹配10個數字的意思。

三、js手機號脫敏

function maskPhoneNumber(phoneNumber) {
  return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
}

在有些場合下，需要對手機號進行加密或脫敏。這裡使用了正則表達式，將手機號的第4到7位用星號代替。其中(\d{3})和(\d{4})是分組，$1和$2是分別用來替換第一個分組和第二個分組的佔位符。

四、js獲取手機號

navigator.contacts.pickContact(function(contact){
  var phoneNumber = contact.phoneNumbers[0].value;
  document.getElementById("phoneNumberField").value = phoneNumber;
},function(err){
});

在移動端，我們有時候需要從通訊錄中獲取手機號。這裡使用了cordova提供的contacts插件，來獲取第一個聯繫人的手機號，然後將手機號賦值給id為phoneNumberField的input元素。

五、js手機號正則表達式

/^1\d{10}$/

正則表達式是驗證手機號碼的最常用方法之一。上面的代碼中，/^1\d{10}$/表示以1開頭後面跟10個數字的模板。其中^表示開頭，$表示結尾。 \d是匹配任意數字的符號。{10}是匹配10個數字的意思。

六、js驗證手機號

function validatePhoneNumber() {
  var phoneNumber = document.getElementById("phoneNumberField").value;
  if (phoneNumber === "") {
      alert("手機號不能為空！");
      return false;
  }
  if (!validatePhoneNumber(phoneNumber)) {
      alert("手機號格式不正確！");
      return false;
  }
  return true;
}

在實際應用中，我們通常需要對用戶輸入的手機號進行驗證。上面的代碼中，首先獲取id為phoneNumberField的input元素中的手機號。然後通過validatePhoneNumber函數來進行驗證，如果驗證不通過則彈出提示框，並返回false，否則返回true。

七、js手機號碼驗證

function validatePhoneNumber(phoneNumber) {
  if (phoneNumber.length !== 11) {
      return false;
  }
  var reg = /^1\d{10}$/;
  return reg.test(phoneNumber);
}

function validatePhoneNumberField() {
  var phoneNumberField = document.getElementById("phoneNumberField");
  var phoneNumber = phoneNumberField.value;
  if (!validatePhoneNumber(phoneNumber)) {
      phoneNumberField.setCustomValidity("手機號格式不正確！");
  } else {
      phoneNumberField.setCustomValidity("");
  }
}

在表單提交前，我們需要對手機號進行格式驗證。上面的代碼中，validatePhoneNumber函數用來校驗手機號的格式是否正確。如果手機號格式不正確，則調用setCustomValidity函數設置手機號輸入框的驗證提示信息為「手機號格式不正確！」。

八、js驗證手機號號

$("#phoneNumberField").on("blur", function(){
  var phoneNumber = $(this).val();
  if (!validatePhoneNumber(phoneNumber)) {
      alert('請輸入正確的手機號');
      $(this).val("");
      $(this).focus();
  }
});

在某些情況下，我們需要實時驗證輸入的手機號是否正確。如上面的代碼，在phoneNumberField的失焦事件中，獲取輸入框中的手機號，然後調用validatePhoneNumber函數來進行驗證。如果驗證不通過，則彈出提示框，並將手機號輸入框的值設置為空，並重新聚焦在該輸入框上。