189 8069 5689

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

这篇文章主要讲解了JS如何使用正则表达式实现常用的表单验证功能，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

成都一家集口碑和实力的网站建设服务商，拥有专业的企业建站团队和靠谱的建站技术，十载企业及个人网站建设经验 ,为成都上1000+客户提供网页设计制作,网站开发,企业网站制作建设等服务,包括成都营销型网站建设，品牌网站设计，同时也为不同行业的客户提供成都网站设计、成都网站制作的服务,包括成都电商型网站制作建设,装修行业网站制作建设，传统机械行业网站建设,传统农业行业网站制作建设。在成都做网站,选网站制作建设服务商就选成都创新互联公司。

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

设计合适的提示信息；

  • 正则表达式筛选错误输入。

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

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

常用正则表达式

文本输入（拒绝表情）：/^[\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('*'+$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 = /\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. 元字符

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

  1. 原义文本字符

    a,b,c,d..

  2. 元字符

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

    \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)

看完上述内容，是不是对JS如何使用正则表达式实现常用的表单验证功能有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。


当前文章：JS如何使用正则表达式实现常用的表单验证功能
链接分享：http://cdxtjz.cn/article/ijoioc.html

其他资讯