進行資料驗證 (data validation) 就是檢查使用者是否有符合的輸入內容,這就需要用到正規運算式 (regular expression) 了。所謂的正規運算式是指特定組合的字元組合,驗證使用者輸入內容也就是檢查使否有匹配的字元組合。
JavaScript 的正規運算式也是內建物件 (object) 之一,字面常數 (literal) 為兩個反斜線之間的內容,例如
/something/ // 配對 something /at/ // 配對 at /[a-z]/ // 配對 a 到 z 之間任一字元 /[aeiou]/ // 配對 a 、 e 、 i 、 o 、 u 任一字元
反斜線之間就是配對的文字,除了實際把文字寫出來外,也可用功能字元組合,例如上面用中括弧表示某些字元的集合。下面是常見的功能字元
功能字元 | 說明 |
---|---|
. | 任何單一字元 |
| | 或 |
() | 群組 |
[] | 字元集合 |
{} | 出現次數 |
+ | 至少出現 1 次 |
\ | 表示功能字元 |
^ | 開頭 |
$ | 結尾 |
* | 0 次或多次出現 |
? | 出現 0 次或 1 次 |
\b | 相接文字 |
\B | 沒有相接文字 |
\d | 數字字元 |
\D | 非數字字元 |
\s | 空白字元 |
\S | 非空白字元 |
\w | 文字字元 |
\W | 非文字字元 |
例如下例驗證使用者的輸入是否為四個數字
<html> <head> <title>RE Demo</title> <script> function validate() { var display = document.getElementById("display"); var input = document.getElementById("input"); var number = /\d{4}/; if (number.test(input.value)) { display.innerHTML = "Right!" } else { display.innerHTML = "Wrong!" } } </script> </head> <body> <input type="text" size="20" id="input"> <input type="button" value="Validate" onclick="validate()"><br / > <div>result: <span id="display"></span></div> </body> </html> <!-- 《程式語言教學誌》的範例程式 http://pydoing.blogspot.com/ 檔名:redemo.html 功能:示範 JavaScript 程式 作者:張凱慶 時間:西元 2012 年 12 月 -->
瀏覽器開啟後,輸入四個數字點擊 Validate
如果只有輸入三個數字,結果會顯示 Wrong!
正規運算式物件的 test() 方法用來檢查參數 (parameter) 字串 (string) 是否符合正規運算式,如果符合就回傳 true ,不符合則回傳 false 。
使用資料驗證的好處就是在資料送進伺服器之前先作檢查,以免浪費網路傳送的時間與空間,雖然我們的範例並沒有進入到伺服器的部份,這點技巧先學起來對往後開發網站也是很有幫助的。
回到我們編密碼針對英文小寫字母的部份,我們需要下面的驗證函數 (function)
function validateInput(inputField, displayField) { var re = /[a-z]+/; if (re.test(inputField.value)) { displayField.innerHTML = inputField.value; } else { displayField.innerHTML = "Wrong!!"; } }
/[a-z]+/ 表示任一個英文小寫字母,上面 validateInput() 只有提示使用者的輸入,如果輸入中沒有英文小寫字母,就在訊息欄顯示 Wrong!! 。 HTML 的部份直接由預定的文字輸入框的 onkeypress 屬性呼叫 validateInput()
<input type="text" id="input" onkeypress="validateInput(this, document.getElementById('display'))" name="input" size="67"><br / >
完整範例請參考
onkeypress 是使用者按按鍵的動作,因此使用者對文字輸入框輸入任何字元時就會執行 validateInput() ,只要使用者有輸入英文小寫字母,訊息欄就會同步顯示使用者輸入,如下
好了,接下來我們要來自訂 Encrypt 物件囉!
中英文術語對照 | |
---|---|
資料驗證 | data validation |
正規運算式 | regular expression |
物件 | object |
字面常數 | literal |
函數 | function |
您可以繼續參考
網頁軟體開發
相關目錄
回 JavaScript 入門指南
回 JavaScript 教材
回首頁
參考資料
https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Regular_Expressions
http://www.w3schools.com/jsref/jsref_obj_regexp.asp
http://www.tutorialspoint.com/javascript/javascript_regexp_object.htm
沒有留言:
張貼留言