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 交通频道 作文范文 30年同学聚会感言 小学五年级作文700字:那次,我真不该原谅他 妈妈,我已可以飞翔!人物介绍作文800字 初中初一作文550字:最美不过读书时 《时间赋》教学设计(转载) 经典爱情语录:当你爱一个人的时候… 初中生有关新年愿望的作文:我有一个新年愿望 想象生活(转载) 天长地久的友谊在哪 抓鱼作文50字 演讲稿的写作要领及方法 张诉王刑事自诉状范本参考 萝卜变身刺猬(汪操群) 写给分手女友的感人情书 句句动情 小学六年级作文550字:那些难忘的事 向榜样学习 一夜秋霜 追随 2012年感恩母亲节作文:感谢母亲 职场中比丰厚薪水更重要的事 母亲的元宵节 学校“光盘”行动调查报告 在党员先进性教育活动转段动员大会上的讲话_先进性教育 2015三年级数学教学反思 脚印作文350字 永远的坐票作文500字 500字关于国庆的话题作文 雨,大自然的精灵 我的家乡一一北京 爬山虎,另一种生命的诠释作文 紫丁香的期待{1}作文1100字 不悔的岁月 描写春天的段落(2) 教代会暨工代会开幕词 为什么作文450字 麻雀偷食作文250字 忧伤华尔兹 酒店的定额管理制度 乖狐狸的故事作文500字 模范共产党员先进事迹材料 【精品】会计事务所实习心得 祝寿主持词模板 留点时间给自己,留点空白给心灵(以空白为话题的高中作文800字) 家乡的芦花 柏拉图的梦作文500字 面板的温暖 瞬间的感动作文300字 风中,花儿谢了 晚安心语:当我们自以为很重要的时候,生活才刚开始准备原谅我们的幼稚 2013新教师年度工作总结范文

Copyright © 2016 phpStudy |