JS表单验证正则表达式实战：常用规则与RegExp详解

本文通过具体实例，介绍如何利用JavaScript中的正则表达式来实现常见的表单验证功能，供读者参考借鉴。

表单验证是网站或应用程序开发中的关键环节。恰当的错误提示不仅能有效减少无效数据的录入，还能提升用户的整体使用体验。然而，表单设计的多样性以及用户输入行为的不确定性带来了挑战。一方面需要尽量减少引发用户反感的错误提示，另一方面又要确保获取足够有效的信息。如何在两者之间取得平衡？

关于编写简单的表单验证，可参考：https://www.jb51.net/article/185782.htm

从Google等渠道可以获取一些实用的处理思路：

设计合理且清晰的提示信息；
利用正则表达式过滤非法输入。

如何将错误信息恰当地展示给用户，往往因项目而异，需结合具体场景分析（可参考淘宝、京东等电商平台的交互设计）。本文重点探讨第二种方案：通过正则表达式最大程度地过滤用户的非法输入。

首先列出一些常用的正则表达式，随后再对其进行深入全面的学习。

常用正则表达式

文本输入（拒绝表情符号）：/^[\u4e00-\u9fa5\w]+.*$/gi

密码校验：/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/

中文地址（以中文字符开头，可包含英文字符、数字及括号）：/^([\u4e00-\u9fa5])+[\u4e00-\u9fa5a-zA-Z0-9()（）]*$/

身份证号码：/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i

电子邮箱地址：/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

传真号码：/^(\d{3,4}-)?\d{7,8}$/

网址链接：/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)*(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$\/

座机号码：/^($\d{3,4}$|\d{3,4}-|\s)?\d{7,14}$/

手机号码：/^1[34578]\d{9}$/

邮政编码：/^[1-9][0-9]{5}$/

通用验证信息提示函数


  /**
   * @param {Object} $input 需要验证的输入项
   * @param {String} reg  正则表达式
   * @param {String} tips 提示信息
   */
  function isInfoValid($input, reg, tips) {
   var val = $input.val().trim();
   if(val == '') {
    $input.next().remove();
    $input.after('<span class="valid-error">*'+$input.siblings("label").text().trim()+'不能为空！<span>')
   }
   else if(reg && tips && !reg.test(val)) {
    $input.next().remove();
    $input.after('<span class="valid-error">'+ tips +'</span>')
   }else {
    $input.next().remove();
   }
  }

  // 可以这样使用

  isInfoValid($zipCode, /^[1-9][0-9]{5}$/, '*请输入正确的邮编！');

深入学习正则表达式

1. RegExp对象

实例化RegExp对象主要有两种方法：

字面量方式

var reg = /\bis\b/g; // 全局匹配单词is
构造函数方式

var reg = new RegEXP('\\bis\\b',g)

2. 修饰符

g：global，表示全局搜索。若不添加此修饰符，默认只匹配到第一个结果后停止，默认值为false，该属性为只读。
i：ignore case，表示忽略大小写。默认值为false，该属性为只读。
m：multiple lines，表示多行搜索。默认值为false，该属性为只读。
lastIndex：表示当前表达式匹配内容的最后一个字符的下一个位置。
source：表示正则表达式的文本字符串部分。
```
> var reg1 = /\w/gim;
> reg1.source
< "\w"
```

3. 元字符

正则表达式由两种基本字符类型组成：

原义文本字符

例如a,b,c,d等普通字母。

元字符

*+？$ ^ . | \ （）{ } [ ]

\t	水平制表符
\v	垂直制表符
\n	换行符
\r	回车符
\0	空字符
\f	换页符

4. 字符类

我们可以使用元字符[]来构建一个简单的字符类。

所谓类，是指符合某些特定特征的对象，是一个泛指概念，并不特指某个具体字符。

表达式[abc]将字符a、b或c归为一类，该表达式可以匹配这类中的任意字符。

字符取反（^）

使用元字符^可以创建反向类。

表达式[^abc]表示匹配不是字符a、b或c的内容。

5. 范围类

使用[a-z]连接两个字符表示从a到z的任意字符，这是一个闭区间，包含a和z本身。
```
> 'a1b2c3b4'.replace(/[a-z]/g, 'Q');
< "Q1Q2Q3Q4"
```

范围类可以连写，例如[a-zA-Z]。

> '2015-11-5'.replace(/[0-9-]/g, 'A')
< "AAAAAAAAA"

6. 预定义类及边界

6.1 预定义类

字符	等价类	含义
.	[^\r\n]	除了回车符和换行符以外的所有字符
\d	[0-9]	数字字符
\D	[^0-9]	非数字字符
\s	[\t\n\x0B\f\r]	空白字符
\w	[a-zA-Z_0-9]	单词字符（字母数字下划线）
\W	[^a-zA-Z0-9_]	非单词字符

6.2 边界

字符	含义
^	以XXXXX开始
$	以xxxx结束
\b	单词边界
\B	非单词边界

7. 量词

字符	含义
？	出现零次或一次（最多出现1次）
+	出现一次或多次
*	出现零次或多次（任意
{n}	出现n次
{n,m}	出现n到m次
{n,}	至少出现n次

8. 贪婪模式与非贪婪模式

8.1 贪婪模式

在正则表达式中，默认采用尽可能多的匹配方式。

> '1234678'.replace(/\d{3,6}/g, 'X')
< "X78"

8.2 非贪婪模式

非贪婪模式让正则表达式尽可能少地匹配，也就是说一旦成功匹配就不再继续尝试后续匹配。

实现方法很简单，只需在量词后面加一个问号?即可。

> '123456789'.match(/\d{3,5}?/g)
< ["123","456","789"]

9. 分组

9.1 分组

使用()可以达到分组的功能，使量词作用于整个分组。

> 'fayfayfayfsd'.replace(/(fay){3}/g, 'X')
< "Xfsd"

9.2 或

使用|表示逻辑或。

> 'ByronCasper'.replace(/Byron|Casper/g, 'X')
< "XX"

9.3 $引用，捕获分组

注意：一定要加()，使用$来捕获分组内容。

> '2016-11-05'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$2-$3-$1')
< "05-11-2016"

忽略分组

如果不希望捕获某些分组，只需在分组内加上?:即可。

(?:Byron).(ok)

PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：

JavaScript正则表达式在线测试工具： http://tools.jb51.net/regex/javascript

正则表达式在线生成工具： http://tools.jb51.net/regex/create_reg

更多关于jQuery相关内容可查看本站专题：《jQuery正则表达式用法总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

JavaScript正则表达式在表单验证中的应用与基础教程