Menu

30天學會 MooTools 教學(8): 輸入過濾-數字

今天我們來看看MooTools是怎樣使得過濾用戶輸入變得非常輕鬆。我們今天將講一些基本的數字過濾，明天再更深入地講講字符串過濾。

注意：JavaScript中的輸入過濾只是為了保證（客戶端）代碼順利執行，並不能替代服務器端的字符串過濾來保護你的應用程序不被注入攻擊。

在第四講的最後的一個例子中，我們從文本輸入框獲取RGB值，然後使用它們來改變頁面背景色，今天我們首先來看看那個例子的部分代碼，並以此展開我們這一講。

 

rgbToHex()

從技術上講，rgbToHex()方法實際上是屬於Array集合的。由於它是一個來處理數字的數組方法，我們今天來學習一下這個方法。從功能上來講，rgbToHex()使用起來很簡單： 

function changeColor(red_value, green_value, blue_value){
    var color = [red_value, green_value, blue_value].rgbToHex(); 
    alert('Converts to : ' + color); 
}

這很正常很完美，因為紅色、綠色和藍色的值都是數字。試試，如果當你傳入了一些其他意外的東西：

在這個結果的最後你看到了一個「NaN」，NaN代表不是一個數字（Not a Number）。如果你把顏色的值作為硬編碼寫在代碼裡面，這種情況可能不會出現。但是如果你是從一個輸入表單獲得的這

個值，那麼你很可能會碰到這樣的情況，你需要去處理這樣一些不符合要求的輸入值。

 

toInt()

因此，現在我們需要一種方式確保傳給rgbToHex()方法的參數都是數字——這裡就需要使用toInt()方法了。toInt()是另一個相對簡單的函數。你可以在一個變量上調用它，那麼它將儘可能地將它轉換成一個整數。 


var toIntDemo = function(make_me_a_number){
    var number = make_me_a_number.toInt();
    alert ('Best Attempt : ' + number);
}

正如你說看到的，toInt()方法並不能處理所有你可以想到的情況，不過幸虧有了MooTools裡面另外一個很酷的方法叫做$type()，我們也可以很好地處理那個問題。

 

$type()

$type()是另外一個來自MooTools的令人不可思議的簡單和有用的東西。它可以檢查你傳入的無論什麼變量，然後返回一個字符串，告訴你這個變量是什麼類型： 

var checkType = function(variable_to_check){
    var variable_type = $type(variable_to_check);
    alert("Variable is a : " + variable_type);
}

那裡還有許多$type()方法可以檢測的類型——你可以在這個Core.$type()文檔中找到一個完整的列表。不過現在，我們真正關心的是怎麼檢測整數。如果我們在

toIntDemo()方法中使用$type()方法，那麼我們就可以很容易地處理那些toInt()不能處理的輸入了： 

var toIntDemo = function(make_me_a_number){
    //Try to make the input number
    var number = make_me_a_number.toInt();
 
    //If That didn't work, set number to 0
    if ($type(number) != 'number'){number = 0;}
    alert('Best Attempt : ' + number);
}

 

當我們把它們和changeColor()方法組合起來，我們就可以得到一個幾乎接近完美的解決方案了： 

var changeColor_2 = function(red_value, green_value, blue_value){
    //Try to make sure everything is an integer
    red_value = red_value.toInt();
    green_value = green_value.toInt();
    blue_value = blue_value.toInt();
 
    //Set default values on anything thats Not a Number
    if ($type(red_value)   != 'number'){red_value = 0;}
    if ($type(green_value) != 'number'){green_value = 0;}
    if ($type(blue_value)  != 'number'){blue_value = 0;}
 
    //Calculate hex value
    var color = [red_value, green_value, blue_value].rgbToHex(); 
    alert('Converts to : ' + color); 
}

最後一個方法中傳給rgbToHex()方法的數字超過了RGB允許值0-255的範圍，這個值還是被忠實地轉換成了它的十六進制值。不幸的是，這意味著我們接受了一個超過那個範圍的數字，我們將不能得到一個有效的十六進制顏色值。幸運的是，MooTools中哎呦另外一個方法，我們可以用來處理這個問題。

 

limit()

MooTools中的limit()方法也是非常簡單直接的。你可以在一個數字上面調用這個方法，傳入一個這個數字允許的最小值和一個允許的最大值作為參

數，它會自動地進行舍入處理。你還需要牢記這一點：limit方法需要傳入整數參數，因此一般在使用limit方法之前先對你要指定為數字的東西（或者其他在數字集合（裡面的東西）使用toInt()方法。Number Collection） 

var limitDemo = function(number_to_limit){
    //Do our best to get an integer
    number_to_limit = number_to_limit.toInt();
 
    //Get the limited value
    var limited_number = number_to_limit.limit(0, 255);
    alert("Number Limited To : " + limited_number);
}

 

示例代碼

把上面的方法和我們剛才的changeColor()方法混合起來試試： 

var changeColor = function(red_value, green_value, blue_value){
    //Try to make sure everything is an integer
    red_value   = red_value.toInt();
    green_value = green_value.toInt();
    blue_value  = blue_value.toInt();
 
    //Set default values on anything thats Not a Number
    if ($type(red_value)   != 'number'){red_value = 0;}
    if ($type(green_value) != 'number'){green_value = 0;}
    if ($type(blue_value)  != 'number'){blue_value = 0;}
 
    //Limit Everything to the RGB Scale (0 - 255)
    red_value   = red_value.limit(0, 255);
    green_value = green_value.limit(0, 255);
    blue_value  = blue_value.limit(0, 255);
 
    //Calculate hex value
    var color = [red_value, green_value, blue_value].rgbToHex(); 
    alert('Converts to : ' + color); 
}


更多學習

下載一個包含你開始所需要的全部東西的zip包

 

Mootools 教學列表：