DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> MooTools教程(8):輸入過濾-數字
MooTools教程(8):輸入過濾-數字
編輯:關於JavaScript     

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

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

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

rgbToHex()

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

來很簡單:

參考代碼: [復制代碼] [保存代碼]
  1. function changeColor(red_value, green_value, blue_value){
  2.     var color = [red_value, green_value, blue_value].rgbToHex(); 
  3.     alert('Converts to : ' + color); 
  4. }

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

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

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

toInt()

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

參考代碼: [復制代碼] [保存代碼]
  1. var toIntDemo = function(make_me_a_number){
  2.     var number = make_me_a_number.toInt();
  3.     alert ('Best Attempt : ' + number);
  4. }

   

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

$type()

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

參考代碼: [復制代碼] [保存代碼]
  1. var checkType = function(variable_to_check){
  2.     var variable_type = $type(variable_to_check);
  3.     alert("Variable is a : " + variable_type);
  4. }

   

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved