輸入畫面
為什麼要做驗證?
因為作為設計者，永遠不該預設使用者會乖乖照設計者的意思輸入。


音樂藝文

職場產業

創作

<div class="draft--imgNormal draft-block"><div><div style="height:422px" class="image-block-prerender" data-src="https://images.vocus.cc/c5013043-d15c-4806-af43-f24e918a3db0.jpg" data-width="422" data-height="56" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block">輸入畫面</figcaption></div></div>
<h2 class="draft-block draft--h2" name="header-ft2c0">為什麼要做驗證?</h2>
<blockquote class="draft-block draft--blockquote">永遠不該預設使用者會乖乖照設計者的意思輸入。</blockquote>
<ul>
  <li class="draft-block draft--li">確保使用者輸入的資料如預期，符合正確的格式。</li>
  <li class="draft-block draft--li">使用正則表達式(Regular Expression)對輸入的內容做檢核</li>
  <li class="draft-block draft--li">在按鈕上做畫面控制。</li>
</ul>
<h2 class="draft-block draft--h2" name="header-dnqa1">作業流程</h2>
<h3 class="draft-block draft--h3" name="header-63tv1">初始畫面控制</h3>
<div class="draft--imgNormal draft-block"><div><div style="height:407px" class="image-block-prerender" data-src="https://images.vocus.cc/9a9ded4e-c6db-45d7-86dd-0c902e4c298f.jpg" data-width="407" data-height="50" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block">初始畫面</figcaption></div></div>
<div class="draft-block draft--p left">一開始遇到輸入框，預先勾上<span style="font-weight: bold; ">否</span>，並且不允許輸入行動電話，直到勾選<span style="font-weight: bold; ">是</span>才允許使用者輸入。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:413px" class="image-block-prerender" data-src="https://images.vocus.cc/8e73be8e-3eee-4516-9f21-aded2ae70d6c.jpg" data-width="413" data-height="57" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block">勾選【是】</figcaption></div></div>
<h3 class="draft-block draft--h3" name="header-6f70p">輸入內容檢核</h3>
<h3 class="draft-block draft--h3" name="header-cadlr"></h3>
<div class="draft--imgNormal draft-block"><div><div style="height:916px" class="image-block-prerender" data-src="https://images.vocus.cc/aec5cf52-2e4c-4df6-944e-4d48452357de.jpg" data-width="916" data-height="172" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block">格式錯誤:跳出提醒視窗且清除輸入內容</figcaption></div></div>
<div class="draft-block draft--p left"></div>
<div class="draft--imgNormal draft-block"><div><div style="height:918px" class="image-block-prerender" data-src="https://images.vocus.cc/59d76b8b-755e-4286-827d-d09a838e0529.jpg" data-width="918" data-height="133" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block">格式正確</figcaption></div></div>
<h2 class="draft-block draft--h2" name="header-bs95t">程式碼</h2>
<div class="draft--imgNormal draft-block"><div><div style="height:542px" class="image-block-prerender" data-src="https://images.vocus.cc/adc7cb5b-c89f-48d9-8c43-7c596e32fc0f.jpg" data-width="542" data-height="293" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">要求格式：</div>
<ul>
  <li class="draft-block draft--li">前兩碼為09開頭</li>
  <li class="draft-block draft--li">後8碼為數字0~9</li>
</ul>
<div class="draft-block draft--p left"></div>

永遠不該預設使用者會乖乖照設計者的意思輸入。

確保使用者輸入的資料如預期，符合正確的格式。

使用正則表達式(Regular Expression)對輸入的內容做檢核

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

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

【Javascript】行動電話格式驗證

專案產生大量又瑣碎的作業做處理，眼下要從iReport的設定檔(jrxml)擷取每一項套印參數出來，提供給別人做Excel公式的資料表進行作業。

【Javascript】檔案資料處理

遇到的坑、解過的題、新知識的探索、舊時代的遺毒!? 工作後我發現，文件更新往往跟不上新需求的更迭，犯錯的歷史總是不斷重演。因此，我改變了方式，蒐集從程式上、系統上的每一次異常處理過程，好讓再次遇到相同的問題時能快速應變。此專題就是我的錯題本，期待日後不管在工作上或交流上遇到難題，都能輕鬆地應答：有什麼難的，我都踩過。