本文共 927 字，大约阅读时间需要 3 分钟。

1. 在使用表单提交数据的时候由于输入的数据可能不合法，所以在表单提交或者文本框发生变化的时候来校验数据是否符合规定的要求，假如不符合要求，那么需要提示错误信息给用户，让用户重新输入，并且return false让表单不能够提交到控制器中

2. 这里我们使用Jquery来调用表单文本框内容改变的监听函数：change()，当文本框内容改变的时候进行数据校验，所以这里涉及到了正则表达式的书写，下面是常用的几种匹配方式：

^ 以...开头

$ 以...结尾

* 匹配前面的表达式任意次

+ 匹配前面的表达式一次或者多次，相当于{0,}

{n} 匹配确定的n次

{n，} 至少匹配n次

{m，n} 最少匹配m次且最多匹配n次

\d    匹配数字0-9

[a-z] 匹配小写字母

[A-Z] 匹配大写字母

[a-zA-Z]匹配任意字母

[0-9] 匹配数字

x|y 匹配符合x条件或者y条件

...还有一些是不太常用的匹配

3. 这里特别要注意的是假如匹配表单上中存在着|运算符的时候特别是匹配的内容处于中间的时候，比如就像下面的邮箱的匹配，@后面可以是若干位的数字或者字母，这时候匹配的内容处于中间的时候一定要加上括号，例如x|y 加上括号：(x|y)，所以像下面这样加：

 var regEmail = /^\d{10,12}@(\d{3}|[a-zA-Z]{2,4}).[a-zA-Z]{2,3}$/;

不能像下面这样加：像下面这样加括号跟没加是一样，理解它的意思满足前面的条件或者满足后面的条件这样前面限制10-12位数字的条件就没有用了，只要后面的条件[a-zA-Z]{2,3}).[a-zA-Z]{2,3}$部分匹配也会满足匹配条件，这样的匹配是错误的，所以在使用|的时候特别注意一定要加上括号的问题

regEmail = /^\d{10,12}@(\d{2,3})|([a-zA-Z]{2,3}).[a-zA-Z]{2,3}$/;

4. 下面是具体的测试用例