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 相关文章推荐
window.dialogArguments 使用说明
Apr 11 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
在vue中使用jsonp进行跨域请求接口操作
Oct 29 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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
PHP&MYSQL服务器配置说明
2006/10/09 PHP
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
javascript实现图片上传前台页面
2015/08/18 Javascript
理解 JavaScript Scoping & Hoisting(二)
2015/11/18 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
使用grappelli为django admin后台添加模板
2014/11/18 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
python实现UDP协议下的文件传输
2020/03/20 Python
python numpy实现rolling滚动案例
2020/06/08 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
计算机通信专业推荐信
2014/02/22 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
团队精神口号
2014/06/06 职场文书
商品陈列协议书
2014/09/29 职场文书
医院党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年财务部工作总结
2014/11/11 职场文书
自我工作评价范文
2015/03/06 职场文书
质量承诺书格式范文
2015/04/28 职场文书