JavaScript数据格式验证探讨

1.需求

　　修改某个文本框数据，要求对修改后的格式做验证（必须是数字）。

　　注：实际需求比上述复杂，为了说明问题，这里特意简化了需求（如：对修改后数据依赖条件的判断，数据入库等）。

2.关于NaN的探讨（失败经历）

　　针对以上需求，我构建了文本框，并为这个文本添加了点击事件。

 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>

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）严格按照匹配方法进行匹配。