續「JavaScript學習路-(23)表單驗證-1」

在判斷是否真的填入資料還不夠，因為填好的資料未必是正確的資料。
這時就要加入判斷驗證了。

要驗證資料的正確與否，得看想索取的資料類型。
以下針對幾個比較常見的學習 & 記錄：

字串最小 & 最大值
選擇輸入欄位 –> 輸入文字 –> 離開文字框 –>
判斷：
如果字數小於最小值或大於最大值，提示使用者輸入符合範圍內字數 –> 回傳 false；
符合範圍，顯示完成任務 –> 回傳 true。
HTML :
1 為訊息最小值；20 為訊息最大值；
this.form 代表本欄位物件傳送到函式：
form 用於一個表單裡有多個物件的時候，方便找尋；
因為提示訊息要在 #msg 出現，所以 document.getElementById(‘msg’); 傳送到函式

測試網址請點我

上述方法是最基礎的方式，但表單內容不可能只有一項，
如果每個都這樣處理應該很麻煩且耗時…

JavaScript 有內建資料驗證的函式，
叫做正規表示法（正規式），也叫做通用表示法（通用法），
英文寫成 Regular expression 。

正規式的兩種寫法：
第一種：/expression/
第二種：re = new RegExp(“pattern”, “flag”)
兩種的使用時機不太一樣，如果只是單純判斷可以採用第一種，
有變數的話就得使用第二種。
以下記錄做法。

/expression/
前後都是 // ，要注意不能用 “” 或是 ” 包起來，不然會變成字串。
中間的 expression 就是寫判斷的條件，而判斷條件就由一些中介字元以及量詞組成。

列出一些常用的中介字元：
. ：比對任何字元，除了換行以外都可以
\d：比對數字
\D：比對非數字
\w：比對文數
\s：比對空白 (space)、tab、enter
^ ：比對樣式起始
$ ：比對樣式結尾

常用的量詞，寫在量詞前都是子樣式：用途是調整樣式
() ：集合字元跟中介字元，成為子樣式
* ：前一個子樣式出現零次或多次
{n}：前一個子樣式出現 N 次
{min, max} ：最少次數 & 最多次數
+ ：前一個子樣式必須出現，次數不限
? ：前一個子樣式必須出現 0 或 1 次（兩次以上都不行）
[] ：有括號中的任一字，要表示範圍的話加上 – 。例 /[0-9]/
\ ：表示這符號後面的是一個字元。例 /\// –> /、/\/$ –> $

正規表示式 Regular Expression 這裡有更詳細的中介字元表

舉一些例子：
比對一組五字文數，其中第一個字一定要字元，最後一個字一定要數字
/^\D\w{3}\d$/
比對開頭是123的文數組
/^123\w\w/
比對區碼 – 電話號碼
/^0\d-\d{7,8}$/

下一篇待續…

本文同步發表於 http://ithelp.ithome.com.tw/ironman7/app/article/dev/recent/10159466