快捷導(dǎo)航

Mootools 1.2教程輸入過(guò)濾第一部分（數(shù)字）

更新時(shí)間：2009年09月15日 18:58:26 作者：

今天我們來(lái)看看MooTools是怎樣使得過(guò)濾用戶(hù)輸入變得非常輕松。我們今天將講一些基本的數(shù)字過(guò)濾，明天再更深入地講講字符串過(guò)濾。

注意：JavaScript中的輸入過(guò)濾只是為了保證（客戶(hù)端）代碼順利執(zhí)行，并不能替代服務(wù)器端的字符串過(guò)濾來(lái)保護(hù)你的應(yīng)用程序不被注入攻擊。
在第四講的最后的一個(gè)例子中，我們從文本輸入框獲取RGB值，然后使用它們來(lái)改變頁(yè)面背景色，今天我們首先來(lái)看看那個(gè)例子的部分代碼，并以此展開(kāi)我們這一講。
rgbToHex()
從技術(shù)上講，rgbToHex()方法實(shí)際上是屬于Array集合的。由于它是一個(gè)來(lái)處理數(shù)字的數(shù)組方法，我們今天來(lái)學(xué)習(xí)一下這個(gè)方法。從功能上來(lái)講，rgbToHex()使用起
來(lái)很簡(jiǎn)單：
參考代碼：

復(fù)制代碼代碼如下:

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

這很正常很完美，因?yàn)榧t色、綠色和藍(lán)色的值都是數(shù)字。試試，如果當(dāng)你傳入了一些其他意外的東西：
在這個(gè)結(jié)果的最后你看到了一個(gè)“NaN”，NaN代表不是一個(gè)數(shù)字（
Not a Number）。如果你把顏色的值作為硬編碼寫(xiě)在代碼里面，這種情況可能不會(huì)出現(xiàn)。但是如果你是從一個(gè)輸入表單獲得的這
個(gè)值，那么你很可能會(huì)碰到這樣的情況，你需要去處理這樣一些不符合要求的輸入值。
toInt()
因此，現(xiàn)在我們需要一種方式確保傳給rgbToHex()方法的參數(shù)都是數(shù)字——這里就需要使用toInt()方法了。toInt()是另一個(gè)相對(duì)簡(jiǎn)單的函數(shù)。你可以在一個(gè)變量上調(diào)用它，那么它將盡可能地將它轉(zhuǎn)換成一個(gè)整數(shù)。
參考代碼：

復(fù)制代碼代碼如下:

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

正如你說(shuō)看到的，toInt()方法并不能處理所有你可以想到的情況，不過(guò)幸虧有了MooTools里面另外一個(gè)很酷的方法叫做$type()，我們也可以很好地處理那個(gè)問(wèn)題。
$type()
$type()是另外一個(gè)來(lái)自MooTools的令人不可思議的簡(jiǎn)單和有用的東西。它可以檢查你傳入的無(wú)論什么變量，然后返回一個(gè)字符串，告訴你這個(gè)變量是什么類(lèi)型：
參考代碼：

復(fù)制代碼代碼如下:

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

那里還有許多$type()方法可以檢測(cè)的類(lèi)型——你可以在這個(gè)
Core.$type()文檔中找到一個(gè)完整的列表。不過(guò)現(xiàn)在，我們真正關(guān)心的是怎么檢測(cè)整數(shù)。如果我們?cè)?
toIntDemo()方法中使用$type()方法，那么我們就可以很容易地處理那些toInt()不能處理的輸入了：
參考代碼：

復(fù)制代碼代碼如下:

 
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); 
} 

當(dāng)我們把它們和changeColor()方法組合起來(lái)，我們就可以得到一個(gè)幾乎接近完美的解決方案了：
參考代碼：

復(fù)制代碼代碼如下:

 
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); 
} 

最后一個(gè)方法中傳給rgbToHex()方法的數(shù)字超過(guò)了RGB允許值0-255的范圍，這個(gè)值還是被忠實(shí)地轉(zhuǎn)換成了它的十六進(jìn)制值。不幸的是，這意味著我們接受了一個(gè)超過(guò)那個(gè)范圍的數(shù)字，我們將不能得到一個(gè)有效的十六進(jìn) 制顏色值。幸運(yùn)的是，MooTools中哎呦另外一個(gè)方法，我們可以用來(lái)處理這個(gè)問(wèn)題。
limit()
MooTools中的limit()方法也是非常簡(jiǎn)單直接的。你可以在一個(gè)數(shù)字上面調(diào)用這個(gè)方法，傳入一個(gè)這個(gè)數(shù)字允許的最小值和一個(gè)允許的最大值作為參
數(shù)，它會(huì)自動(dòng)地進(jìn)行舍入處理。你還需要牢記這一點(diǎn)：limit方法需要傳入整數(shù)參數(shù)，因此一般在使用limit方法之前先對(duì)你要指定為數(shù)字的東西（或者其他在數(shù)字集合（
Number Collection）里面的東西）使用toInt()方法。
參考代碼：

復(fù)制代碼代碼如下:

 
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()方法混合起來(lái)試試：
參考代碼：

復(fù)制代碼代碼如下:

 
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); 
} 