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

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

写一个简单的表单验证: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>*'+$input.siblings("label").text().trim()+'不能为空!<span>') } else if(reg && tips && !reg.test(val)) { $input.next().remove(); $input.after('<span>'+ 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://www.heiqu.com/f555eef5165da6ae862ba35e8ff383e1.html