Mootools1.2教程輸入過濾第一部分（數字）_Mootools

來源：懂視網責編：小采時間：2020-11-27 20:44:24

Mootools1.2教程輸入過濾第一部分（數字）_Mootools

Mootools1.2教程輸入過濾第一部分（數字）_Mootools:注意：JavaScript中的輸入過濾只是為了保證（客戶端）代碼順利執行，并不能替代服務器端的字符串過濾來保護你的應用程序不被注入攻擊。在第四講的最后的一個例子中，我們從文本輸入框獲取RGB值，然后使用它們來改變頁面背景色，今天我們首先來看看那個例子的

推薦度：

點擊下載本文 文檔為doc格式

導讀Mootools1.2教程輸入過濾第一部分（數字）_Mootools:注意：JavaScript中的輸入過濾只是為了保證（客戶端）代碼順利執行，并不能替代服務器端的字符串過濾來保護你的應用程序不被注入攻擊。在第四講的最后的一個例子中，我們從文本輸入框獲取RGB值，然后使用它們來改變頁面背景色，今天我們首先來看看那個例子的

注意：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方法之前先對你要指定為數字的東西（或者其他在數字集合（
Number Collection）里面的東西）使用toInt()方法。
參考代碼：代碼如下:
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);
}