2.1K
在現代網頁開發中，對使用者輸入的資料進行驗證是一個非常重要的環節。對於台灣的手機號碼，驗證其格式的正確性不僅可以避免資料輸入錯誤，還能提升用戶體驗。本篇文章將詳細介紹如何使用 JavaScript 驗證台灣手機號碼的格式，並提供一個實用範例。
台灣手機號碼格式規範
台灣的手機號碼通常符合以下規則：
- 手機號碼為 10 位數字。
- 必須以
09開頭。 - 第三位數字必須是
1到9（不能是0）。 - 後面 7 位是任意數字。
根據上述規則，我們可以利用正規表達式進行驗證。
正規表達式設計
以下是用於匹配台灣手機號碼的正規表達式：
const taiwanMobileRegex = /^09[1-9]\d{7}$/;解釋：
^：匹配字串的開頭。09：表示號碼必須以09開頭。[1-9]：第三位數字必須是1-9。\d{7}：匹配接下來的 7 位數字（\d表示數字，{7}表示重複 7 次）。$：匹配字串的結尾。
這樣，我們就可以確保輸入的手機號碼完全符合台灣的手機號碼格式。
實用範例
HTML表單
<form id="mobileForm">
<label for="mobile">請輸入手機號碼：</label>
<input type="text" id="mobile" placeholder="例如：0912345678">
<p id="errorMessage" style="color: red; display: none;">手機號碼格式不正確！</p>
<button type="submit">送出</button>
</form>JavaScript 驗證邏輯
document.getElementById("mobileForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表單提交
const mobileInput = document.getElementById("mobile").value;
const errorMessage = document.getElementById("errorMessage");
if (isValidTaiwanMobile(mobileInput)) {
alert("手機號碼格式正確！");
errorMessage.style.display = "none";
} else {
errorMessage.style.display = "block";
}
});
function isValidTaiwanMobile(phone) {
const taiwanMobileRegex = /^09[1-9]\d{7}$/;
return taiwanMobileRegex.test(phone);
}強化驗證與使用者體驗
為了進一步提升驗證的準確性與使用者體驗，可以考慮以下改進：
1.去除空格或其他符號 使用 .replace() 方法去除空格或破折號：
const cleanPhone = phone.replace(/\s|-/g, "");2.提示輸入格式 在錯誤提示中加入說明，例如「請輸入 10 位數字，格式為 0912345678」。
探索更多來自 雖然沒準備什麼資料 的內容
訂閱即可透過電子郵件收到最新文章。