Mootools 1.2教程 输入过滤第一部分(数字)


注意: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);
}

更多学习

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



相关阅读:
正确地利用css改进网站设计的3个技巧
php读取mysql乱码,用set names XXX解决的原理分享
深入对iis写权限的利用
一步一步学习PHP(1) php开发环境配置
ASP.NET性能优化之减少请求
asp.net下配置数据源时出现: 未将对象引用设置到对象的实例。
关于要不要关闭Vista中的IPv6功能的问题
FreeBSD下配置IPSec:WinXP------FreeBSD
CSS技巧:IE6用import导入CSS的问题
javascript 关键字高亮显示实现代码
ASP项目中的公共翻页模块
实例讲解Oracle数据库自动增加ID的SQL
CSS网页布局的好处与坏处
如何将Windows 2003迁移至Windows 2008一
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 雨的洗礼作文700字 成长宣言作文400字 感恩节的由来英文版 **市**镇双港路社区居委会创建省级文明社区汇报材料 人间大爱——不抛弃——《真情人间》节目访谈纪实 2013年12月党员思想汇报范文:学习群众路线 小学六年级作文650字:溅落的泪 玩中的发现作文250字 高考倒计时一百天宣誓词 许一段静美的时光,想你 给震区小朋友的一封信作文500字 小学六年级作文800字:七龙珠 学会游泳的愉快 公文写作中常遇的问题 赏析:上海2篇地震题材中考作文获满分作文800字 恋人心境 20条英汉互译经典语录_句句伤感唯美 林小福分享:《月亮说它忘记了》—独木舟—《第二章 上弦月》 神鸟读后感400字 彦子灵的霸气打油诗 七律.无题(二首) 2013一年级的作文:可爱的小白兔 最美孝心少年观后感600字 座右铭大全_最经典的座右铭_句句精辟 心中的白马 当危险降临时作文900字 免费《假如》第一课时教学设计6 精彩的跳绳比赛作文450字 要不要陌路 姐姐的“苹果” 【精品】感恩企业心得体会 小学一年级作文:健康的绿色消费 贫困村年度帮扶计划 愚人节整人搞笑短信大全 淡然处之,笑看人生 2016周末经典搞笑祝福语大全 小学五年级作文450字:干部就能欺负人吗? 衣袂飘飘为谁舞 我迷茫的爱情 因听紫塞三更雨,却忆潇湘半盏灯作文900字 关于万圣节的诗歌:万圣节 长城之旅作文700字 百花齐放待何时 母爱像空气 小学寒假安全讲话稿范文 角马 30元钱到哪儿了? 旅中三趣 太阳花的联想 小学四年级作文750字:海洋情

Copyright © 2016 phpStudy |