vue手机号怎么验证正则表达式_学习Vue中那些正则表达式

想看懂Vue的template解析部分，会发现其中有大量的正则表达式。所以先学习基础知识。

其实正则表达式并不难，关键在于拆分理解，并且经常使用。就可以很好的熟悉正则表达式了。具体语法可参照正则表达式 - JavaScript | MDN 。

正则用法

在JavaScript中正则表达式用法为：

/正则表达式特殊字符/修饰符(可选)

特殊字符

这里列一下正则的特殊字符及其用法，加深理解和映象。

\ 将字符变为特殊或非特殊字符。如 n 变为换行符 \n，特殊符号 ( 变为字符 \(。

^ 匹配字符串起始位置。

$ 匹配字符串结束位置。

* 匹配前面的子表达式零到多次。

+ 匹配前面的子表达式一到多次。

? 匹配前面的子表达式零到一次。

{n} 匹配前面的子表达式的n个，如 o{2} 能够匹配 food 不能匹配 god。

{n,} 至少匹配n个前面的子表达式，如 o{2,} 能够匹配 fooooood 不能匹配 god。

{n, m} 至少匹配n次，至多匹配m次。

非贪婪模式 默认为贪婪模式，如 o+ 将匹配 foooood 的所有 o。而非贪婪模式(在匹配符后面加 ?)，如 o+? 则只会匹配一个o

. 匹配除换行符外任何单个字符。换行符为 \n 和 \r。

(x) 捕获括号，匹配并记住匹配项。

(?:x) 非捕获括号，匹配并不记住匹配项。如 /(?:foo){1,2}/，这里将 foo 作为一个整体进行匹配1到2次。

x(?=y) 匹配x仅仅在x后面跟y的时候。?=y 表示字符串末尾是y。

x(?!y) 匹配x仅仅在x后面不跟着y的时候。?!y 表示字符串末尾不是y。

x|y 匹配 x 或 y，如 jack|rose 就可以匹配到 jack 和 rose 两个字符串。

[xyz] 匹配方括号内任意字符。

[^xyz] 反向字符集，匹配除方括号内字符的任意字符。

[0-9] 范围匹配，匹配0-9范围内任意字符。

\w 查找单词字符。单词字符包括：a-z、A-Z、0-9，以及下划线。

\W 查找非单词字符。

\d 查找数字字符。

\D 查找非数字字符。

\s 查找空白字符。空白字符包括空格、\n、\f、\r、\t、\v。

\S 查找非空白字符。

\b 匹配单词边界，通常匹配单词开头和结尾。如 /\bcd/ 匹配 cdkey。

\B 匹配非单词边界。如 /\Bcd/ 匹配 abcd。

\O 查找 NULL 字符。

\n 换行符。

\f 换页符。

\r 回车符。

\t 制表符。

\v 垂直制表符。

修饰符

i 执行对大小写不敏感的匹配。

g 执行全局匹配。

m 执行多行匹配。

简单正则实例分析

上面介绍了正则的简单用法，下面收集一些简单的正则进行分析。

/^[0-9]*$/

0-9范围内0到多个数字的组合，且字符开头结尾都是0-9的数字。即表示整数。如 1314、0

/^\d{m,n}$/

匹配m-n位的数字。由于开头结尾都是数字，所以它是一个固定长度的纯数字。

/^\-[1-9][0-9]*$/

匹配-开头，数字结尾，第一个字符为1-9，随后0-n个字符为0-9的字符。即非零负整数。

/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

这是匹配邮件的一个正则，我们一点点看。

开头匹配1-n个单词字符;

括号里匹配 [-+.] 字符加上1-n个单词字符，括号内容匹配0-n次；

加上@字符；

加上1-n个单词字符字符

括号里匹配 [-.] 字符加上1-n个单词字符，括号内容匹配0-n次；

加上.字符

加上1-n个单词字符字符

括号里匹配 [-.] 字符加上1-n个单词字符，括号内容匹配0-n次；

结尾；

这里考虑了很多因素邮箱命名因素，一般的邮箱地址像 475966597@qq.com 这种肯定是没问题的。所以，我极端测试来展现它列出的可能性，结果如下(我把所有可能性都符合了一遍)：

正则测试结果

/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/

再来看个手机号验证。一步步来：

开头匹配手机号前三位是 13[0-9] 或 14[5|7] 或者 15[0|1|2|3|5|6|7|8|9] 或 18[0|1|2|3|5|6|7|8|9]；

匹配后八位数字为0-9的字符；

结束。

/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/

这是验证身份证的正则，来看看：

开头为一个1-9的数字；

加上五位0-9的数字；

加上一位1-9的数字；

加上三位0-9的数字；

加上 0/d 或者 1[0-2]，即月份 01、02……12；

加上 ([0|1|2]\d) 或者 3[0-1]，即日起，01、13、25、31；

加上身份证末四位；

/^([a-zA-Z]+-?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$/

这是xml文件命名正则。

开头为 1-n个 [a-zA-Z] 字符 加上 0-1个 - 组成；

括号内的内容可重复1-n次；

加上1-n个 [a-zA-Z0-9] 字符;

加上 ·.·;

加上 x 或 X;

加上 m 或 M;

加上 l 或 L;

结尾;

解析 Vue 源码中的正则

/;(?![^(]*\))/g

由于 ?! 符号，所以是匹配 ; 字符。

我们之前说过，?! 符号表示字符串末尾不是指定字符串。

这个指定字符串 [^(]*\) 解析为 0-n 个不为 ( 的任意字符加上 )。

用例子说明。匹配条件为 ; 字符后面不能跟 ;xx)xx 但是可以跟 ;(xx)xx

/:(.+)/

以上正则表示匹配 : 加上 1-n 个 .

var defaultTagRE = /\{\{((?:.|\n)+?)\}\}/g;

var regexEscapeRE = /[-.*+?^${}()|[\]\/\\]/g;

defaultTagRE 的正则：匹配 {{ 字符，然后匹配非换行符或 \n (即排除了 \r)，最后加上 }}。

regexEscapeRE 的正则：全局匹配 -、.、*、+、?、^、$、{、}、(、)、|、[、]、/、\。注意，只有在 () 中 | 才表示或，如 /(g|f)ood/。

/&(?:lt|gt|quot|amp|#10|#9);/g

匹配 <、>、"、&amp、 、 。

var onRE = /^@|^v-on:/; // 以@或v-on开头的字符

var dirRE = /^v-|^@|^:/; // 以v-、@、：开头的字符

var forAliasRE = /(.*?)\s+(?:in|of)\s+(.*)/; // 匹配如 item in list 或者 item of list

var forIteratorRE = /\((\{[^}]*\}|[^,]*),([^,]*)(?:,([^,]*))?\)/;

var argRE = /:(.*)$/; // 匹配 : 加上 0-n 个非换行字符结尾的条件

var bindRE = /^:|^v-bind:/; // 匹配 : 或 :v-bind 开头的字符

var modifierRE = /\.[^.]+/g; // 全局匹配 `.` 加上 1-n 个非 `.` 字符。

解析一下这个 forIteratorRE，其实就是看着乱。

先得到一个 ( 字符；

再获取 (\{[^}]*\}|[^,]*) ，这里匹配的是 { 加 0-n 个非 } 字符加 }，或者 0-n 个非 , 字符。

加上字符 ,;

得到 ([^,]*) , 这里匹配的是 0-n 个非 , 字符；

得到 (?:,([^,]*))?\)，加上字符 , 然后加上 0-n 个非 , 字符，这整个表达式，数量为 0-1；

最后加上 )。

所以匹配字符串可以是 (,)、({abc},wc,uvw)。

/'(?:[^'\\]|\\.)*'

|"(?:[^"\\]|\\.)*"

|`(?:[^`\\]|\\.)*\$\{

|\}(?:[^`\\]|\\.)*`

|`(?:[^`\\]|\\.)*`/g

以上正则看似很长，其实通过 | 或关系进行拆分，敲回车便于查看后发现，其实是由五个表达式组合起来的。

逻辑差不多，看第一个表达式：先添加' ，然后添加0-n个非 ' 和 \ 的字符，最后加上 '。如 'abc' 。

/-(\w)/g

先添加 - 字符，再添加单词字符，进行匹配。

/\B([A-Z])/g

不在单词边界上的 A-Z 的字母字符，如 rAr。

/(?:^|[-_])(\w)/g

字符串第一个字符为单词字符，或者以 [-_] 加字符形式出现的匹配。

/^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/

再长的正则拿到手就需要进行拆分：

^\s* 表示以0-n个空白字符开头；

([^\s"'<>\/=]+) 表示有1-n个非 空白字符、"、'、、\、/、=的字符。

最后一个表达式较长，而且由于表达式最后有 ?，所以这段表达式可以不匹配。先是0-n个空白字符，加上 = 号，加上 0-n 个空白字符。之后有三种情况：情况一：加上 “，加上 0-n 个非空白字符，再加上1-n个 ”；情况二：加上 '，加上 0-n 个非空白字符，再加上1-n个 '；情况三：加上1-n个非 空白字符、"、'、=、、` 的字符。

最后

正则表达式看到这也算是有了一定了解了。

其实只要懂得正则基本语法、然后耐心去看去理解，会发现正则也不是那么难的。

这里推荐 https://regex101.com/#javascript 这个工具，本博客就是一边用这个工具实践验证一边写的，非常好用！

我先通过猜测理解正则大致意思，然后用这个工具去验证，验证成功，反推回来更好理解正则表达式。

就是这样！

明日预告

既然正则被我们搞定了，那么明天写 Vue 的 template 解析问题就不大啦。敬请期待~