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

    

JavaScript数据格式验证探讨的更多相关文章

  1. 关于去除Eclipse对JavaScript的验证

    关于去除Eclipse对JavaScript的验证 在我们使用大量JavaScript作为一些UI或其他组件来使用时,很多情况下,明明引用的这些JavaScript是可以正常使用的,但Eclipse却 ...

  2. JavaScript 数据验证类

    JavaScript 数据验证类 /* JavaScript:验证类 author:杨波 date:20160323 1.用户名验证 2.密码验证 3.重复密码验证 4.邮箱验证 5.手机号验证 6. ...

  3. javascript数字验证输入

    javascript数字验证功能: <html> <body> <p>请输入数字.如果输入值不是数字,浏览器会弹出提示框.</p> <input ...

  4. javascript实现验证身份证号的有效性并提示

    javascript实现验证身份证号的有效性并提示 function nunber(allowancePersonValue){ if(allowancePersonValue=="身份证号 ...

  5. JavaScript:验证输入

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. JavaScript正则验证邮箱

    正则表达式/^正则$/.test() <html> <head> <title>JavaScript</title> <meta charset= ...

  7. javascript form验证、完善 第24节

    <html> <head> <title>Form对象</title> <style type="text/css"> ...

  8. java 数据格式验证类

    作为一个前端,懂一点java,php之类的,甚好. 我所在的项目前端采用的就是java的spring mvc框架,所以我们也写java,掐指一算,也快一年了. 前端而言,验证是一个坎,绕不过去的,前面 ...

  9. 如何跳过前端JavaScript的验证

    绕开前端的JS验证通常有以下的方法: 方法一: 将页面保存到自己机器上,然后把脚本检查的地方去掉,最后在自己机器上运行那个页面就可以了 方法二: 该方式与方法一类似一样,只是将引入js的语句删掉,或则 ...

随机推荐

  1. moco实例

    一.moco模拟接口响应json moco的下载地址见虫师博客园:https://www.cnblogs.com/fnng/p/7511539.html foo.json文件内容如下 [ { &quo ...

  2. android项目源码

    [置顶] Android精品开源项目整理_V20140221(持续更新中..) 让我们回顾下2013年有哪些精品资源:Android精品开源项目整理_V20131115(持续更新中..) 引言:   ...

  3. CF-796B

    B. Find The Bone time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  4. g2o扩展,然后重新编译生成新库。

    orb作者有g2o扩展,g2o原作者也有g2o扩展,等各项基本功扎实以后,考虑把他们整合在一起,再加上高博扩展的g2o,统一cmake,make,然后能make install 正常使用,就最好了.

  5. Flutter实战视频-移动电商-42.详细页_UI主页面架构搭建

    42.详细页_UI主页面架构搭建 详细分成六大部分拆分开 body里面用FutureBuilder异步加载. FutureBuilder里面的furure属性这里用一个方法,必须返回的也是future ...

  6. Flutter实战视频-移动电商-60.购物车_全选按钮的交互效果制作

    60.购物车_全选按钮的交互效果制作 主要做全选和复选框的这两个功能 provide/cart.dart 业务逻辑写到provide里面 先持久化取出来字符串,把字符串编程list.循环list ca ...

  7. HDU - 1715 - 大菲波数 - JAVA

    http://acm.hdu.edu.cn/showproblem.php?pid=1715 import java.io.*; import java.util.*; import java.mat ...

  8. 16-CoreData之多表关联(存储自定义数据模型)

    多表关联 1.1-简介 什么是多表关联 在处理数据库的关系中,无非只有三种关系 一对一:一个老师只能在一个教室上课,不可能同时在两个教室上课 一对多:一个教室可以有多个学生,但一个学生只能在一个教室 ...

  9. Android布局中的layout_weight和weightSum属性的详解及使用

    由于Android设备的尺寸大小不一,种类繁多,当我们在开发应用的时候就要考虑屏幕的适配型了,尽可能让我们的应用适用于主流机型的尺寸,这样我们的应用不会因为尺寸不同而不美观,解决屏幕适配问题的方法有很 ...

  10. STL——pair

    功能:pair将一对值组合成一个值,这一对值可以具有不同的数据类型(T1和T2),两个值可以分别用pair的两个公有函数first和second访问. #include <bits/stdc++ ...