软件开发培训班 >> 编程开发 >> JavaScript


Mootools 1.2教程 输入过滤第一部分（数字）

　　本文标签：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 didnt 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);
}

更多学习

下载一个包含你开始所需要的全部东西的zip包

  • 标准的数字（Number）处理功能函数
  • Mootools的数字（Number）处理功能函数
  • Mootools的数组（Array）处理功能函数