JavaScript學習路-(24)表單驗證-2

續「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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Time limit is exhausted. Please reload the CAPTCHA.