Mixing
JavaScript 入門指南 - 資料驗證
JavaScript 入門指南 - 資料驗證
由於我們編密碼針對英文小寫字母，如果使用者沒有輸入英文小寫字母的話，整個輸入其實是沒有意義的
進行資料驗證 (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
window.___gcfg = { 'lang': 'zh-TW' };
沒有留言:
張貼留言