JS使用正则表达式实现常用的表单验证功能分析

本文实例讲述了JS使用正则表达式实现常用的表单验证功能。分享给大家供大家参考，具体如下：

表单验证是一个网站或应用的重点，一条合适的错误提示不仅可以减少无效信息录入，更会给用户留下良好的使用体验。但表单设计千差万别，用户输入更不可控。一方面，我们要减少出错提示（这会引起用户反感），而另一方面，我们则希望得到足够多的有效信息。鱼和熊掌如何兼得？

写一个简单的表单验证:https://www.jb51.net/article/185782.htm

从Google中，我们可以找到一些实用的方法：

• 设计合适的提示信息；
• 正则表达式筛选错误输入。

如何将错误信息合适的展示给用户，我想是见仁见智，需要根据具体项目具体分析（参考淘宝、京东等电商设计）。这里主要讨论第二种方案：通过正则表达式最大限度的过滤用户输入

这里先列出我自己常用的正则表达式，然后在深入全面的学习它！

常用正则表达式

文本输入（拒绝表情）：/^[u4e00-u9fa5w]+.*$/gi

密码： /^(&＃63;![0-9]+$)(&＃63;![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/

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

身份证：/^d{6}(18|19|20)&＃63;d{2}(0[1-9]|1[12])(0[1-9]|[12]d|3[01])d{3}(d|X)$/i

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

传真：/^(d{3,4}-)&＃63;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)&＃63;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("*"+$input.siblings("label").text().trim()+"不能为空！")
   }
   else if(reg && tips && !reg.test(val)) {
    $input.next().remove();
    $input.after(""+ tips +"")
   }else {
    $input.next().remove();
   }
  }

  // 可以这样使用

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

深入学习正则表达式

1. RegExp对象

有两种方法实例化RegExp对象

• 字面量

  var reg = /is/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. 元字符

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

1. 原义文本字符

   a,b,c,d..

2. 元字符

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

   	水平制表符
   v	垂直制表符
   	换行符
   	回车符
   	空字符
   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 预定义类

6.2 边界

7. 量词

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

8.1 贪婪模式

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

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

8.2 非贪婪模式

让正则表达谁尽可能少的匹配，也就是说一旦成功匹配就不再继续尝试

做法很简单，在量词后面加一个 ？即可

> "123456789".match(/d{3,5}&＃63;/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"

• 忽略分组

  不希望捕获某些分组，只需要在分组内加上 ？：

  (&＃63;: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程序设计有所帮助。