用JS与正则表达式验证表单数据格式的方法

根据表单数据项的实际内容不同一般都有一个标准的数据格式要求，当表单数据准备提交到服务器之前我们应该在客户端先进行校验，格式合格再交到服务器进行进一步处理，如果格式不合格就先弹出错误提示并不提交，这样不仅能提高网页与用户的交互效率还能减轻服务器处理的负担。一般来讲这个客户端进行的格式校验可以使用JS结合正则表达式来完成。

一、什么是正则表达式

正则表达式英文全称是Regular Expression，简称regexp。是一种描述字符串结构的语法规则，是一个特定的格式化模式，它可以匹配、替换、截取匹配的字符串。

二、正则表达式的语法规则

1.正则表达式变量的定义

JS风格： var re=new RegExp（‘a’）；

Perl风格：var re=/a/

以上对比可见perl风格代码简单方便，所以我们一般使用perl风格。

2.正则表达式的首尾定位符

^ ：匹配字符串的开始位置。

$ ：匹配字符串的结束位置。

如^ab，代表匹配以ab开头的字符串，x$，代表匹配以x结尾的字符串。

3.单个字符[]

如[m]代表匹配小写字母m，如果不区分大小写就写成[Mm]，代表匹配一个字符M或m

4.选择字符 |

选择字符理解为“或”，如匹配数字1或小写h就可以写成（1|h）

5.连字符-

连字符用于指定一个字符范围，如[a-z]代表a到z之间的任意一个小写字母。

6.限定符？*+{n，m}

？ 匹配前面的字符零次或一次

+ 匹配前面的字符一次或多次

* 匹配前面的字符零次或多次

{n} 匹配前面的字符n次

{n，} 匹配前面的字符最少n次

{n，m}匹配前面的字符最少n次，最多m次

7.点字符.

匹配换行符以外的任意一个字符

8.转义符

将特殊字符变为普通字符，如匹配点字符本身就可以使用＼.

9.括号字符（ ）

用于限定范围或分组，

如（th|tr）s代表匹配ths或者trs，如果去掉括号写成th|trs就代表匹配th或者trs了。

（[0-9]a）{3}，代表将[0-9]a一起重复3次，如果去掉括号写成[0-9]a{3}就代表将a重复3次了。

三、验证表单数据的正则表单式写法

以某注册表单为例，表单的html代码如下：

1.手机号的正则表达式写法。汉字规则描述：号码共有11位数字，第一位数字只能是1，第二位只能是3或5或8，第3到11位可以是任意数字字符。正则表达式描述：

2.身份证号的正则表达式写法。汉字规则描述：一共18位数字，前6位是区号，其中第一位只能是0到8。中间4位年份，其中前2位只考虑19或20。2位月份，第一位只能是0或1。两位日期，第一位可以是0到3。3位顺序码是任意数字。1位校验码是0到9的数字或字母X。

正则表达式描述：

3.邮箱的正则表达式写法。汉字规则描述：第一部分有一串英文字母、数字或下划线，第二部分是“@”，第三部分是一串字母或数字，第四部分是点“.” ，第五部分是一串字母。以上的英文都大小写均可。

正则表达式描述：/^＼w+@[a-z0-9]+＼.[a-z]+/i$/

以上表达式中的参数/i表示字母的大小写均可。

四、设计JS代码实现表单提交的数据校验

<五、小结

将以上表单网页运行并输入数据进行测试，发现只要格式不合格的均弹出错误提示框并停留在本网页，只有数据格式输入规范的情况下才能跳转并提交到网页doRegister.php进行处理。做到了低级格式错误在客户端完成，即提高了用户的交互效率也减轻了服务端的负担。这些都是利用JS结合正则表单式实现的。

（作者单位：武汉城市职业学院）