【Javascript】行動電話格式驗證

更新於 發佈於 閱讀時間約 1 分鐘
輸入畫面

輸入畫面

為什麼要做驗證?

永遠不該預設使用者會乖乖照設計者的意思輸入。
  • 確保使用者輸入的資料如預期,符合正確的格式。
  • 使用正則表達式(Regular Expression)對輸入的內容做檢核
  • 在按鈕上做畫面控制。

作業流程

初始畫面控制

初始畫面

初始畫面

一開始遇到輸入框,預先勾上,並且不允許輸入行動電話,直到勾選才允許使用者輸入。

勾選【是】

勾選【是】

輸入內容檢核



格式錯誤:跳出提醒視窗且清除輸入內容

格式錯誤:跳出提醒視窗且清除輸入內容


格式正確

格式正確

程式碼

raw-image

要求格式:

  • 前兩碼為09開頭
  • 後8碼為數字0~9


留言
avatar-img
留言分享你的想法!
avatar-img
Err500
12會員
77內容數
遇到的坑、解過的題、新知識的探索、舊時代的遺毒!? 工作後我發現,文件更新往往跟不上新需求的更迭,犯錯的歷史總是不斷重演。因此,我改變了方式,蒐集從程式上、系統上的每一次異常處理過程,好讓再次遇到相同的問題時能快速應變。此專題就是我的錯題本,期待日後不管在工作上或交流上遇到難題,都能輕鬆地應答:有什麼難的,我都踩過。
Err500的其他內容
2024/09/21
工作上固定頻率會收到User提供的設定需求資訊,檔案大多為excel的格式.xlsx或.xls,需要擷取內容的參數資訊,轉換撰寫sql語法寫入資料庫進行操作。 既然格式都是固定的,何不動手寫個小工具,一鍵完成轉換呢?
Thumbnail
2024/09/21
工作上固定頻率會收到User提供的設定需求資訊,檔案大多為excel的格式.xlsx或.xls,需要擷取內容的參數資訊,轉換撰寫sql語法寫入資料庫進行操作。 既然格式都是固定的,何不動手寫個小工具,一鍵完成轉換呢?
Thumbnail
2024/04/09
上次完成到基本的CRUD及權限控制,後面花了點時間把排序、分頁、圖表總覽的部分做完,其他細節是佈署上線,一般在公司內有專屬的部門處理,僅了解一下流程。
Thumbnail
2024/04/09
上次完成到基本的CRUD及權限控制,後面花了點時間把排序、分頁、圖表總覽的部分做完,其他細節是佈署上線,一般在公司內有專屬的部門處理,僅了解一下流程。
Thumbnail
2023/12/24
專案產生大量又瑣碎的作業做處理,眼下要從iReport的設定檔(jrxml)擷取每一項套印參數出來,提供給別人做Excel公式的資料表進行作業。
Thumbnail
2023/12/24
專案產生大量又瑣碎的作業做處理,眼下要從iReport的設定檔(jrxml)擷取每一項套印參數出來,提供給別人做Excel公式的資料表進行作業。
Thumbnail
看更多
你可能也想看
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
之前在條件式格式(一)提到了怎麼用條件式格式的功能,把想看到的資料、以更醒目的方法顯示,更方便我們判讀數據,來看看怎麼做更複雜的自訂公式!
Thumbnail
之前在條件式格式(一)提到了怎麼用條件式格式的功能,把想看到的資料、以更醒目的方法顯示,更方便我們判讀數據,來看看怎麼做更複雜的自訂公式!
Thumbnail
React 表單驗證是一種技術與使用者體驗的設計,讓使用者能夠即時檢查輸入的資料並修正,提升使用者的使用體驗,並確保資料的正確性。
Thumbnail
React 表單驗證是一種技術與使用者體驗的設計,讓使用者能夠即時檢查輸入的資料並修正,提升使用者的使用體驗,並確保資料的正確性。
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
Thumbnail
除了常見的下拉式選單,我們還有其他的驗證機制可以使用。今天就來看看怎麼設定數值、文字、日期的資料驗證吧!
Thumbnail
除了常見的下拉式選單,我們還有其他的驗證機制可以使用。今天就來看看怎麼設定數值、文字、日期的資料驗證吧!
Thumbnail
常見的下拉式選單怎麼做?資料驗證又是什麼?資料驗證是個「驗證資料是否符合某條件的機制」,我們通常會用它來避免別人輸入無效的值,減少錯誤的發生。來看看吧!
Thumbnail
常見的下拉式選單怎麼做?資料驗證又是什麼?資料驗證是個「驗證資料是否符合某條件的機制」,我們通常會用它來避免別人輸入無效的值,減少錯誤的發生。來看看吧!
Thumbnail
生命中總會有不得已,有幾個必須把函式寫得很長的時候,要怎麼寫才不容易出錯呢?
Thumbnail
生命中總會有不得已,有幾個必須把函式寫得很長的時候,要怎麼寫才不容易出錯呢?
Thumbnail
輸入畫面 為什麼要做驗證? 因為作為設計者,永遠不該預設使用者會乖乖照設計者的意思輸入。
Thumbnail
輸入畫面 為什麼要做驗證? 因為作為設計者,永遠不該預設使用者會乖乖照設計者的意思輸入。
Thumbnail
JavaScript 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼...
Thumbnail
JavaScript 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼...
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News