首先我们要了解正则表达式是什么，它是一种匹配模式， 不仅能匹配匹配字符，还能匹配位置 ，不少人忽略了匹配字符这个作用，往往碰到这种问题就手足无措。
如果正则只有精确匹配是没有多大意义的，比如：
正则表达式的强大之处在于它的模糊匹配，分为横向模糊和纵向模糊
横向模糊：一个正则可匹配的字符串的长度不是固定的，可以是多种情况的
其实现的方式是使用量词：
比如：
横向模糊匹配到了多种情况，案例中用的正则是/ab{2,5}c/g，后面多了g，它是正则的一个修饰符。表示全局匹配，即在目标字符串中按顺序找到满足匹配模式的所有子串，强调的是“所有”，而不只是“第一个”。
纵向模糊：一个正则匹配的字符串，具体到某一位字符时，它可以不是某个确定的字符，可以有多种可能
其实现的方式是使用范围类
-表示连字符，在此处作特殊用处，但是如果我要匹配'a-z'这三个字符呢？可以这么写：
这样引擎就不会认为它们是一个氛围了， 符号在范围类中起取反的作用， a表示除了a的所有字符。
系统根据范围类又预定义了一些类方便我们使用：
不加g就是惰性匹配，我匹配完一个就不敢了，懒得再干其他事儿了，加了g就是贪婪模式了,我现在精力无限，会尽可能的干事儿，但是我还有些理智，不会干超出能力之外的事儿，比如你给我的范围是{2,5}，我会尽可能做5件事儿，但是不会超过5件事,反正只要在能力范围内，越多越好
此时我既想尽可能的匹配又想让它不那么贪婪有没有办法呢？办法是有的, 贪婪模式一般作用在量词这里，限制在量词这里就好了 ，可以在量词这里加一个？即可搞定。
其中/\d{2,5}?/表示，虽然2到5次都行，当2个就够的时候，就不在往下尝试了。
此时就达到了我们的要求,不过这里完全是为了讲解贪婪模式和惰性模式，并不推荐这么做，我完全可以将{2,5}改成{2}，一样的效果
知道了惰性模式的原理，我们完全可以鼓捣出其他的各式各样的情形：
一个模式可以实现横向和纵向模糊匹配。而多选分支可以支持多个子模式任选其一
具体形式如下：(p1|p2|p3)，其中p1、p2和p3是子模式，用“|”（管道符）分隔，表示其中任何之一
但有个事实我们应该注意，比如我用/good|goodbye/，去匹配"goodbye"字符串时，结果是"good"
而把正则改成/goodbye|good/，结果是
也就是说，分支结构也是惰性的，即当前面的分支匹配上了，后面的就不再尝试了
并且，使用分支的时候注意使用括号，
匹配字符，无非就是范围类、量词和分支结构的组合使用罢了
分析：
表示一个16进制字符，可以用范围类[0-9a-fA-F]
其中字符可以出现3或6次，需要是用量词和分支结构
使用分支结构时，需要注意顺序(惰性)
分析：
对每个地方的数字进行分析：
共4位数字，第一位数字可以为[0-2]。
当第1位为2时，第2位可以为[0-3]，其他情况时，第2位为[0-9]。
第3位数字为[0-5]，第4位为[0-9]
如果也要求匹配7:9，也就是说时分前面的0可以省略:
分析：
年，四位数字即可，可用[0-9]{4}。
月，共12个月，分两种情况01、02、……、09和10、11、12，可用(0[1-9]|1[0-2])。
日，最大31天，可用(0[1-9]|[12][0-9]|3[01])
分析：
整体模式是: 盘符:\文件夹\文件夹\文件夹
其中匹配F:\，需要使用[a-zA-Z]:\，其中盘符不区分大小写，注意\字符需要转义。
文件名或者文件夹名，不能包含一些特殊字符，此时我们需要排除范围类[ \:*<>|"?\r\n/]来表示合法字符。另外不能为空名，至少有一个字符，也就是要使用量词+。因此匹配“文件夹\”，可用[ \:*<>|"?\r\n/]+\。
另外“文件夹\”，可以出现任意次。也就是([^\: <>|"?\r\n/]+\) 。其中括号提供子表达式。
路径的最后一部分可以是“文件夹”，没有\，因此需要添加([^\:*<>|"?\r\n/]+)?。
最后拼接成了一个看起来比较复杂的正则：
用到了惰性匹配，防止把class也提取出来
优化：
^（脱字符）匹配开头，在多行匹配中匹配行开头。
$（美元符号）匹配结尾，在多行匹配中匹配行结尾
比如我们把字符串的开头和结尾用"#"替换（位置可以替换成字符的！）：
多行匹配模式时，二者是行的概念，这个需要我们的注意
\b是单词边界，具体就是\w和\W之间的位置，也包括\w和^之间的位置，也包括\w和$之间的位置
首先，我们知道，\w是范围类[0-9a-zA-Z_]的简写形式，即\w是字母数字或者下划线的中任何一个字符。而\W是排除范围类[^0-9a-zA-Z_]的简写形式，即\W是\w以外的任何一个字符
此时我们可以看看"[#JS#] #Lesson_01#.#mp4#"中的每一个"#"，是怎么来的。
第一个"#"，两边是"["与"J"，是\W和\w之间的位置。
第二个"#"，两边是"S"与"]"，也就是\w和\W之间的位置。
第三个"#"，两边是空格与"L"，也就是\W和\w之间的位置。
第四个"#"，两边是"1"与"."，也就是\w和\W之间的位置。
第五个"#"，两边是"."与"m"，也就是\W和\w之间的位置。
第六个"#"，其对应的位置是结尾，但其前面的字符"4"是\w，即\w和$之间的位置。
知道了\b的概念后，那么\B也就相对好理解了。
\B就是\b的反面的意思，非单词边界。例如在字符串中所有位置中，扣掉\b，剩下的都是\B的。
具体说来就是\w与\w、\W与\W、^与\W，\W与$之间的位置
exp1(?=exp2) 表达式会匹配exp1表达式，但只有其后面内容是exp2的时候才会匹配
exp1(?=exp2) 表达式会匹配exp1表达式，但只有其后面内容不是exp2的时候才会匹配
(?=p)，其中p是一个子模式，即p前面的位置
比如(?=l)，表示'l'字符前面的位置，例如：
而(?!p)就是(?=p)的反面意思
对于位置的理解，我们可以理解成空字符""
因此，把/ hello$/写成/ ^hello$$$/，是没有任何问题的：
也就是说字符之间的位置，可以写成多个。
把位置理解空字符，是对位置非常有效的理解方式
此正则要求只有一个字符，但该字符后面是开头。
比如把"12345678"，变成"12,345,678"。
可见是需要把相应的位置替换成","
使用(?=\d{3}$)就可以做到：
因为逗号出现的位置，要求后面3个数字一组，也就是\d{3}至少出现一次。
此时可以使用量词+：
此时会出现问题：
上面的正则，仅仅表示把从结尾向前数，一但是3的倍数，就把其前面的位置替换成逗号
怎么解决呢？我们要求匹配的到这个位置不能是开头。
我们知道匹配开头可以使用^，但要求这个位置不是开头怎么办？
easy，(?!^)
如果要把"12345678 123456789"替换成"12,345,678 123,456,789"。
此时我们需要修改正则，把里面的开头^和结尾$，替换成\b
其中(?!\b)怎么理解呢？
要求当前是一个位置，但不是\b前面的位置，其实(?!\b)说的就是\B。
因此最终正则变成了：/\B(?=(\d{3})+\b)/g
此题，如果写成多个正则来判断，比较容易。但要写成一个正则就比较困难。
那么，我们就来挑战一下。看看我们对位置的理解是否深刻
我们可以把原题变成下列几种情况之一：
1.同时包含数字和小写字母
2.同时包含数字和大写字母
3.同时包含小写字母和大写字母
4.同时包含数字、小写字母和大写字母
上面的正则看起来比较复杂，只要理解了第二步，其余就全部理解了。
/(?=.*[0-9])^[0-9A-Za-z]{6,12}$/
对于这个正则，我们只需要弄明白(?=.*[0-9])^即可。
分开来看就是(?=.*[0-9])和^。
表示开头前面还有个位置（当然也是开头，即同一个位置，想想之前的空字符类比）。
(?=. [0-9])表示该位置后面的字符匹配. [0-9]，即，有任何多个任意字符，后面再跟个数字。
另一种解法：
“至少包含两种字符”的意思就是说，不能全部都是数字，也不能全部都是小写字母，也不能全部都是大写字母。
那么要求“不能全部都是数字”，怎么做呢？(?!p)出马！
三种'都不能'呢？
1.分组和分支结构
括号是提供分组功能，使量词'+'作用于z和这个整体
而在多选分支结构(p1|p2)中，此处括号的作用也是不言而喻的，提供了子表达式的所有可能
而要使用它带来的好处，必须配合使用实现环境的API
以日期为例。假设格式是yyyy-mm-dd的
提取数据：
match返回的一个数组，第一个元素是整体匹配结果，然后是各个分组（括号里）匹配的内容，然后是匹配下标，最后是输入的文本
可以使用正则对象的exec方法：
也可以使用构造函数的全局属性$1至$9来获取：
替换:
想把yyyy-mm-dd格式，替换成mm/dd/yyyy怎么做？
反向引用:
比如要写一个正则支持匹配如下三种格式：
注意里面的\1，表示的引用之前的那个分组(-|/|.)。不管它匹配到什么（比如-），\1都匹配那个同样的具体某个字符
括号嵌套怎么办？
以左括号（开括号）为准
\10是表示第10个分组，还是\1和0呢？答案是前者，虽然一个正则里出现\10比较罕见
引用不存在的分组会怎样？
因为反向引用，是引用前面的分组，但我们在正则里引用了不存在的分组时，此时正则不会报错，只是匹配反向引用的字符本身。例如\2，就匹配"\2"。注意"\2"表示对2进行了转意
非捕获分组:
之前文中出现的分组，都会捕获它们匹配到的数据，以便后续引用，因此也称他们是捕获型分组。
如果只想要括号最原始的功能，但不会引用它，即，既不在API里引用，也不在正则里反向引用。此时可以使用非捕获分组(?:p)
第二种，匹配整个字符串，然后用引用来提取出相应的数据
思路是找到每个单词的首字母，当然这里不使用非捕获匹配也是可以的
首字母不会转化为大写的。其中分组(.)表示首字母，单词的界定，前面的字符可以是多个连字符、下划线以及空白符。正则后面的?的目的，是为了应对str尾部的字符可能不是单词字符，比如str是'-moz-transform '
通过key获取相应的分组引用，然后作为对象的键
匹配一个开标签，可以使用正则<[^>]+>，
匹配一个闭标签，可以使用</[^>]+>，
但是要求匹配成对标签，那就需要使用反向引用
其中开标签<[ >]+>改成<([ >]+)>，使用括号的目的是为了后面使用反向引用，而提供分组。闭标签使用了反向引用，</\1>。
另外[\d\D]的意思是，这个字符是数字或者不是数字，因此，也就是匹配任意字符的意思
而当目标字符串是"abbbc"时，就没有所谓的“回溯”。其匹配过程是：
其中子表达式b{1,3}表示“b”字符连续出现1到3次。
图中第5步有红颜色，表示匹配不成功。此时b{1,3}已经匹配到了2个字符“b”，准备尝试第三个时，结果发现接下来的字符是“c”。那么就认为b{1,3}就已经匹配完毕。然后状态又回到之前的状态（即第6步，与第4步一样），最后再用子表达式c，去匹配字符“c”。当然，此时整个表达式匹配成功了。
图中的第6步，就是“回溯”。
你可能对此没有感觉，这里我们再举一个例子。正则是：
目标字符串是"abbbc"，匹配过程是：
其中第7步和第10步是回溯。第7步与第4步一样，此时b{1,3}匹配了两个"b"，而第10步与第3步一样，此时b{1,3}只匹配了一个"b"，这也是b{1,3}的最终匹配结果。
这里再看一个清晰的回溯，正则是：
目标字符串是："acd"ef，匹配过程是：
图中省略了尝试匹配双引号失败的过程。可以看出“.*”是非常影响效率的。
为了减少一些不必要的回溯，可以把正则修改为/"[^"]*"/。
正则表达式匹配字符串的这种方式，有个学名，叫回溯法。
回溯法也称试探法，它的基本思想是： 从问题的某一种状态（初始状态）出发，搜索从这种状态出发所能达到的所有“状态”，当一条路走到“尽头”的时候（不能再前进），再后退一步或若干步，从另一种可能“状态”出发，继续搜索，直到所有的“路径”（状态）都试探过。这种不断“前进”、不断“回溯”寻找解的方法，就称作“回溯法” 。
本质上就是深度优先搜索算法。其中 退到之前的某一步这一过程，我们称为“回溯” 。从上面的描述过程中，可以看出，路走不通时，就会发生“回溯”。即， 尝试匹配失败时，接下来的一步通常就是回溯
道理，我们是懂了。那么JS中正则表达式会产生回溯的地方都有哪些呢？
3.1 贪婪量词
之前的例子都是贪婪量词相关的。比如b{1,3}，因为其是贪婪的，尝试可能的顺序是从多往少的方向去尝试。首先会尝试"bbb"，然后再看整个正则是否能匹配。不能匹配时，吐出一个"b"，即在"bb"的基础上，再继续尝试。如果还不行，再吐出一个，再试。如果还不行呢？只能说明匹配失败了。
虽然局部匹配是贪婪的，但也要满足整体能正确匹配。否则，皮之不存，毛将焉附？
此时我们不禁会问，如果当多个贪婪量词挨着存在，并相互有冲突时，此时会是怎样？
答案是，先下手为强！因为深度优先搜索。测试如下：
其中，前面的\d{1,3}匹配的是"123"，后面的\d{1,3}匹配的是"45"。
3.2 惰性量词
惰性量词就是在贪婪量词后面加个问号。表示尽可能少的匹配，比如：
其中\d{1,3}?只匹配到一个字符"1"，而后面的\d{1,3}匹配了"234"。
虽然惰性量词不贪，但也会有回溯的现象。比如正则是：
目标字符串是"12345"，匹配过程是：
知道你不贪、很知足，但是为了整体匹配成，没办法，也只能给你多塞点了。因此最后\d{1,3}?匹配的字符是"12"，是两个数字，而不是一个。
3.3 分支结构
我们知道分支也是惰性的，比如/can|candy/，去匹配字符串"candy"，得到的结果是"can"，因为分支会一个一个尝试，如果前面的满足了，后面就不会再试验了。
分支结构，可能前面的子模式会形成了局部匹配，如果接下来表达式整体不匹配时，仍会继续尝试剩下的分支。这种尝试也可以看成一种回溯。
比如正则：
目标字符串是"candy"，匹配过程：
上面第5步，虽然没有回到之前的状态，但仍然回到了分支结构，尝试下一种可能。所以，可以认为它是一种回溯的
简单总结就是，正因为有多种可能，所以要一个一个试。直到，要么到某一步时，整体匹配成功了；要么最后都试完后，发现整体匹配不成功。
既然有回溯的过程，那么匹配效率肯定低一些。相对谁呢？相对那些DFA引擎。
而JS的正则引擎是NFA，NFA是“非确定型有限自动机”的简写。
大部分语言中的正则都是NFA，为啥它这么流行呢？
答：你别看我匹配慢，但是我编译快啊，而且我还有趣哦。
而在正则表达式中，操作符都体现在结构中，即由特殊字符和普通字符所代表的一个个特殊整体。
JS正则表达式中，都有哪些结构呢？
其中涉及到的操作符有：
上面操作符的优先级从上至下，由高到低。
这里，我们来分析一个正则：
因为是要匹配整个字符串，我们经常会在正则前后中加上锚字符^和$。
比如要匹配目标字符串"abc"或者"bcd"时，如果一不小心，就会写成/^abc|bcd$/。
而位置字符和字符序列优先级要比竖杠高，故其匹配的结构是：
应该修改成:
2.2 量词连缀问题
假设，要匹配这样的字符串：
此时正则不能想当然地写成/^[abc]{3}+$/，这样会报错，说“+”前面没什么可重复的：
此时要修改成：
2.3 元字符转义问题
所谓元字符，就是正则中有特殊含义的字符。
所有结构里，用到的元字符总结如下：
当匹配上面的字符本身时，可以一律转义：
在string中，也可以把每个字符转义，当然，转义后的结果仍是本身：
现在的问题是，是不是每个字符都需要转义呢？否，看情况。
2.3.1 范围类中的元字符
跟范围类相关的元字符有 []、^、- 。因此在会引起歧义的地方进行转义。例如开头的^必须转义，不然会把整个范围类，看成反义范围类。
2.3.2 匹配“[abc]”和“{3,5}”
我们知道[abc]，是个字符组。如果要匹配字符串"[abc]"时，该怎么办？
可以写成/[abc]/，也可以写成/[abc]/，测试如下:
只需要在第一个方括号转义即可，因为后面的方括号构不成字符组，正则不会引发歧义，自然不需要转义。
同理，要匹配字符串"{3,5}"，只需要把正则写成/{3,5}/即可。
另外，我们知道量词有简写形式{m,}，却没有{,n}的情况。虽然后者不构成量词的形式，但此时并不会报错。当然，匹配的字符串也是"{,n}"，测试如下：
var str = "{,3}"
var reg = /{,3}/g
console.log( str.match(reg)[0] )
// =>"{,3}"
2.3.3 其余情况
比如= ! : - ,等符号，只要不在特殊结构中，也不需要转义。
但是，括号需要前后都转义的，如/(123)/。
至于剩下的^ $ . * + ? | \ /等字符，只要不在字符组内，都需要转义的。
因为竖杠“|”,的优先级最低，所以正则分成了两部分\d{15}和\d{17}[\dxX]。
\d{15}表示15位连续数字。
\d{17}[\dxX]表示17位连续数字，最后一位可以是数字可以大小写字母"x"。
可视化如下：
3.2 IPV4地址
正则表达式是：
这个正则，看起来非常吓人。但是熟悉优先级后，会立马得出如下的结构：
((...)\.){3}(...)
上面的两个(...)是一样的结构。表示匹配的是3位数字。因此整个结构是
3位数.3位数.3位数.3位数
然后再来分析(...)：
(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])
它是一个多选结构，分成5个部分：
0{0,2}\d ，匹配一位数，包括0补齐的。比如，9、09、009；
0?\d{2} ，匹配两位数，包括0补齐的，也包括一位数；
1\d{2} ，匹配100到199
2[0-4]\d ，匹配200-249；
25[0-5] ，匹配250-255。
最后来看一下其可视化形式：
掌握正则表达式中的优先级后，再看任何正则应该都有信心分析下去了。
至于例子，不一而足，没有写太多。
这里稍微总结一下，竖杠的优先级最低，即最后运算。
只要知道这一点，就能读懂大部分正则。
另外关于元字符转义问题，当自己不确定与否时，尽管去转义，总之是不会错的。
本文就解决该问题，内容包括：
2.1 是否能使用正则
正则太强大了，以至于我们随便遇到一个操作字符串问题时，都会下意识地去想，用正则该怎么做。但我们始终要提醒自己，正则虽然强大，但不是万能的，很多看似很简单的事情，还是做不到的。
比如匹配这样的字符串：1010010001....
虽然很有规律，但是只靠正则就是无能为力。
2.2 是否有必要使用正则
要认识到正则的局限，不要去研究根本无法完成的任务。同时，也不能走入另一个极端：无所不用正则。能用字符串API解决的简单问题，就不该正则出马。
比如，从日期中提取出年月日，虽然可以使用正则：
其实，可以使用字符串的split方法来做，即可：
比如，判断是否有问号，虽然可以使用：
其实，可以使用字符串的indexOf方法：
比如获取子串，虽然可以使用正则：
其实，可以直接使用字符串的substring或substr方法来做：
var str = "JavaScript"
console.log( str.substring(4) )
// =>Script
2.3 是否有必要构建一个复杂的正则
比如密码匹配问题，要求密码长度6-12位，由数字、小写字符和大写字母组成，但必须至少包括2种字符。
在匹配位置那篇文章里，我们写出了正则是：
其实可以使用多个小正则来做：
所谓准确性，就是能匹配预期的目标，并且不匹配非预期的目标。
这里提到了“预期”二字，那么我们就需要知道目标的组成规则。
不然没法界定什么样的目标字符串是符合预期的，什么样的又不是符合预期的。
下面将举例说明，当目标字符串构成比较复杂时，该如何构建正则，并考虑到哪些平衡。
3.1 匹配固定电话
比如要匹配如下格式的固定电话号码：
055188888888 0551-88888888 (0551)88888888
第一步，了解各部分的模式规则。
上面的电话，总体上分为区号和号码两部分（不考虑分机号和+86的情形）。
区号是0开头的3到4位数字，对应的正则是：0\d{2,3}
号码是非0开头的7到8位数字，对应的正则是：[1-9]\d{6,7}
因此，匹配055188888888的正则是：/^0\d{2,3}[1-9]\d{6,7}$/
匹配0551-88888888的正则是：/^0\d{2,3}-[1-9]\d{6,7}$/
匹配(0551)88888888的正则是：/^(0\d{2,3})[1-9]\d{6,7}$/
第二步，明确形式关系。
这三者情形是或的关系，可以构建分支：
提取公共部分：
进一步简写：
上面的正则构建过程略显罗嗦，但是这样做，能保证正则是准确的。
上述三种情形是或的关系，这一点很重要，不然很容易按字符是否出现的情形把正则写成：
/^(?0\d{2,3})?-?[1-9]\d{6,7}$/
虽然也能匹配上述目标字符串，但也会匹配(0551-88888888这样的字符串。当然，这不是我们想要的。
其实这个正则也不是完美的，因为现实中，并不是每个3位数和4位数都是一个真实的区号。
这就
一. 正则表达式
正则表达式：其实就是一种匹配规则，用于检索字符串
定义正则表达式的两种方式：1.直接定义 2.构造函数定义
那么正则表达式正则强大的地方是它可以写 通配符(拥有特殊含义的字符)
二. 通配符
\w 表示：字母、数字、下划线
\W 表示：除了字母、数字、下划线以外的字符
\d 表示：数字
\D 表示：非数字
^ 表示：以^符号后面的第一个字符开头
表示：以表示：以符号前面的第一个字符结尾
{n} 表示：重复n次
{n,m} 表示：重复n到m次
[xyz] 表示：其中任意一个字符
+ 表示：重复前一项1次或多次 等价于 {1,}
* 表示：重复前一项0次或多次 等价于 {0,}
? 表示：重复前一项0次或1次 等价于 {0,1}
. 表示：除了换行符以外的任意一个字符
\. 表示：.字符 ^ 表示：^ \表示：表示：
可以用()将多个字符作为一个整体
\w 等价于 [0-9a-zA-Z_]
| 表示：或者
[\u4E00-\u9FA5] 是常用汉字的unicode编码范围
三. 正则练习
四. 正则表达式配合字符串的方法
replace()方法
默认情况下，replace()方法，只会替换字符串中匹配的第一段内容
使用正则表达式，添加全局匹配修饰符g，可以替换匹配全部内容
使用正则表达式，添加忽略大小写修饰符i，在匹配内容时会忽略大小写
search()方法
可以通过正则表达式查找位置
五. 添加学生练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加学生</title>
<style>
.err{
color: red
}
.ok{
color: green
}
</style>
</head>
<body>
<form>
<table>
<tr>
<td>姓名：</td>
<td>
<input type="text" id="name">
<span id="nameMsg"></span>
</td>
</tr>
<tr>
<td>年龄：</td>
<td>
<input type="text" id="age">
<span id="ageMsg"></span>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input checked name="sex" type="radio" value="0">男
<input name="sex" type="radio" value="1">女
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input name="hobby" type="checkbox" value="抽烟">抽烟
<input name="hobby" type="checkbox" value="喝酒">喝酒
<input name="hobby" type="checkbox" value="烫头">烫头
<input name="hobby" type="checkbox" value="睡觉">睡觉
</td>
</tr>
<tr>
<td>年级：</td>
<td>
<select id="grade">
<option value="0">请选择</option>
<option value="1">大一</option>
<option value="2">大二</option>
<option value="3">大三</option>
<option value="4">大四</option>
</select>
<span id="gradeMsg">必须要选择一个年级</span>
</td>
</tr>
<tr>
<td>邮箱：</td>
<td>
<input type="text" id="email">
<span id="emailMsg">请输入正确的邮箱格式</span>
</td>
</tr>
<tr>
<td>电话：</td>
<td>
<input type="text" id="phone">
<span id="phoneMsg">请输入正确的电话格式</span>
</td>
</tr>
<tr>
<td>生日：</td>
<td>
<input type="text" id="bornDate">
<span id="bornDateMsg">请输入正确日期格式</span>
</td>
</tr>
<tr>
<td></td>
<td>
<button type="submit">提交</button>
<button type="reset">重置</button>
</td>
</tr>
</table>
</form>
<script>
//获取姓名文本框
let name = document.querySelector('#name')
//获取年龄文本框
let age = document.querySelector('#age')
//表单的提交事件
document.querySelector('form').onsubmit = function(){
// 返回true提交表单，返回false不提交表单
if(checkName() &checkAge()){
return true
}else{
return false
}
}
//姓名文本框失去焦点
name.onblur = checkName
//验证姓名
function checkName(){
//定义验证姓名的正则
let reg = /^[\u4E00-\u9FA5]{2,4}$/
// 调用验证方法
return checkInput("#nameMsg",name,reg,'姓名正确','姓名必须是2-4位汉字')
}
//年龄文本框失去焦点
age.onblur = checkAge
//验证年龄
function checkAge(){
//定义验证年龄的正则
let reg = /^\d{1,2}$|^1([0-1]\d)|20$/
// 调用验证方法
return checkInput("#ageMsg",age,reg,'年龄正确','年龄必须是0-120之间')
}
//验证方法，参数分别是：span元素Id，表单元素对象，正则规则，验证成功消息，验证失败消息
function checkInput(spanId,_this,reg,okMsg,errMsg){
// 获取消息span
let span = document.querySelector(spanId)
//获取信息
let val = _this.value
if(!reg.test(val)){
span.className="err"
span.innerHTML = errMsg
return false //验证失败返回false
}else{
span.className="ok"
span.innerHTML = okMsg
return true //验证成功返回true
}
}
</script>
</body>
</html>
