1.需求
修改某个文本框数据,要求对修改后的格式做验证(必须是数字)。
注:实际需求比上述复杂,为了说明问题,这里特意简化了需求(如:对修改后数据依赖条件的判断,数据入库等)。
2.关于NaN的探讨(失败经历)
针对以上需求,我构建了文本框,并为这个文本添加了点击事件。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>博客园js正则表达式</title> 6 </head> 7 <body> 8 <input id="my_input" onclick="rec();"> 9 </body> 10 </html>
点击事件主要内容是弹出一个prompt 消息对话框,在对话框中进行数据的修改。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function rec(){ var new_input; //用来存储用户更改的新数据 new_input = prompt("请输入新的数据","80"); if(new_input == null){ return; } //数据被更改 }
因为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)严格按照匹配方法进行匹配。