【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
每年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
生命中總會有不得已,有幾個必須把函式寫得很長的時候,要怎麼寫才不容易出錯呢?
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News