当前位置:首页 >> 网络编程

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

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

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

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

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

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

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

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

常用正则表达式

文本输入(拒绝表情):/^[\u4e00-\u9fa5\w]+.*$/gi

密码: /^("通用验证信息提示函数">通用验证信息提示函数

  /**
   * @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. 元字符

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

  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}"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"