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

沒有留言: