Mootools 1.2教程(8)——输入过滤第一部分(数字)
作者:Fdream 来源:Fdream博客 时间:2008-11-27 13:01:00
原文地址:30 Days of Mootools 1.2 Tutorials - Day 8 - Input Filtering Part I (Numbers)
输入过滤——第一部分(数字)
今天我们来看看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(),我们也可以很好地处理那个问题。