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


Posted in Javascript onSeptember 15, 2009

注意: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包

  • 标准的数字(Number)处理功能函数
  • Mootools的数字(Number)处理功能函数
  • Mootools的数组(Array)处理功能函数
Javascript 相关文章推荐
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 Javascript
AJAX学习笔记
May 18 Javascript
Mootools 1.2教程 设置和获取样式表属性
Sep 15 #Javascript
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 #Javascript
Mootools 1.2教程 事件处理
Sep 15 #Javascript
Mootools 1.2教程 函数
Sep 15 #Javascript
Mootools 1.2教程(3) 数组使用简介
Sep 14 #Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 #Javascript
MooTools 1.2介绍
Sep 14 #Javascript
You might like
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
vue如何截取字符串
2019/05/06 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
详解vue 组件注册
2020/11/20 Vue.js
Python中os和shutil模块实用方法集锦
2014/05/13 Python
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
python实现猜单词游戏
2020/05/22 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
经典c++面试题四
2015/05/14 面试题
Unix控制后台进程都有哪些进程
2016/09/22 面试题
五年级数学教学反思
2014/02/11 职场文书
文明市民先进事迹
2014/05/15 职场文书
预防传染病方案
2014/06/14 职场文书
防卫过当辩护词
2015/05/21 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
金砖之国观后感
2015/06/11 职场文书