JavaScript数据格式验证探讨
1.需求
修改某个文本框数据,要求对修改后的格式做验证(必须是数字)。
注:实际需求比上述复杂,为了说明问题,这里特意简化了需求(如:对修改后数据依赖条件的判断,数据入库等)。
2.关于NaN的探讨(失败经历)
针对以上需求,我构建了文本框,并为这个文本添加了点击事件。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>博客园js正则表达式</title>
</head>
<body>
<input id="my_input" onclick="rec();">
</body>
</html>
HTML
点击事件主要内容是弹出一个prompt 消息对话框,在对话框中进行数据的修改。
function rec(){
var new_input; //用来存储用户更改的新数据
new_input = prompt("请输入新的数据","80"); if(new_input == null){
return;
} //数据被更改 }
JS代码
因为input取出来的值为String类型,所以必须转换成为Number类型。对转换之后的数据做判断就可以了。
首先考虑数据格式是否合法。如果转换成Number之后是NaN,就提示「数据不合法」。注意:第一个大坑就从这里开始了:无论如何,都不会跳入 Number(new_input) == NaN 的子句。
在控制台中试了一下,竟然发现: NaN == NaN 返回了false!
好吧,原来所有的问题都集中在这个知识点上。所以关于「转换数据后与NaN进行比较」的思路宣告失败!
3.使用正则表达式(正确思路)
「转换数据后与NaN进行比较」宣布此路不通之后,就换了『匹配正则表达式』这个思路。这个思路肯定是可行的,但在使用的过程中要注意一些细节。
学习「js正则表达式」详细内容可以参考这个系列(系列上 系列下)。
细节一:js正则表达式一定要有开始和结束符号
没有/^ $/,解释器不会认为这是正则表达式。这点和Java不同(Java中不用开始结束标记也是可以的)。
细节二:js正则表达式不需要加上引号(" "或' ')
完整写法如下:/^[1-9][0-9]+$/ 。
细节三:使用何种匹配方法
js正则表达式有自己的构造方法,但我们的需求比较简单,完全不用专门构造一个正则对象。
接下来的问题就是我们该选择哪种匹配方法(详见 系列下)。
根据用法说明,我们要返回布尔值,因此可以明确要使用 test() 方法。即:
/^[1-9][0-9]+$/.test(new_input)
还要说一句:虽然正则表达式和被匹配的字符串都是字符型,但顺序不能颠倒。
4.总结
(1)任意两个NaN不相等。
(2)js正则表达式应该有开始和结束标记,且不需要加引号(" "或'')。
(3)严格按照匹配方法进行匹配。
最新文章
- 用C3中的animation和transform写的一个模仿加载的时动画效果
- Ubuntu菜鸟入门(九)—— 支付宝支付控件安装
- JavaScript indexOf() 方法 和 lastIndexOf() 方法
- ssh用户登录
- android opengl es代码功能
- CentOS 7.0系统安装配置LAMP服务器(Apache+PHP+MariaDB)
- XML的解析方式(DOM、SAX、StAX)
- Android开发代码混淆经验(Eclipse)
- 编写自己的TRACE函数
- CSS减肥的工具–Firefox插件 CSS Usage
- wcf跨机器访问的问题
- [wp8游戏] cocos2d-x v2.2 + VS2013 环境搭建
- perl Socket接收超时设置
- 解决fiddler无法抓取本地部署项目的请求问题
- C++对txt文本进行读写操作
- I春秋——Misc(贝斯家族)
- C#给字符串赋予字面值——字符串插入、转义序列的使用
- Jmeter之https脚本录制
- iOS代码块block使用
- 【BZOJ1211】【HNOI2004】树的计数 prufer序列