欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-09 13:42:52
本文实例讲述了js使用正则表达式实现常用的表单验证功能。分享给大家供大家参考,具体如下:表单验证是一个网站或应用的重点,一条合适的错误提示不仅可以减少无效信息录入,更会给用户留下良好的使用体验。但表单...

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

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

写一个简单的表单验证:

从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. 元字符

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

  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)

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

javascript正则表达式在线测试工具:

正则表达式在线生成工具: