正则表达式以及正则在JS表单校验中的应用
1. 正则表达式的引入
表单验证两种常用的方法:
这里我们使用QQ号码作为表单验证来测试，我们知道QQ号码的规则还是比较复杂，但是这里我们仅仅使用以下三条规则来讲解:
1. qq号必须是5-10位
2. 数字0不可以作为qq号码的开头
3. QQ号码必须是纯数字组成
代码示例如下所示:
当然除了在form表单中添加onsubmit事件来实现表单验证，我们还可以使用在submit类型的input标签中添加onclick事件来实现表单验证，代码如下所示:
相信大家对上述代码都能够理解，但是大家应该也发现了使用传统的if-else来校验qq号码，代码非常冗余，而且可读性很差，何况才短短两条规则就写了这么多的判断，那真实的qq号码肯定规则更多，如果让你去验证邮箱，或者网址呢？所以我们非常有必要学习一门新的技术用于我们JS表单校验，它就是正则表达式了。
2. 正则表达式概述
正则表达式简介
为什么需要正则表达式？
1.本质是用来对复杂文本进行处理。
2.当然也可以用于数据校验
3.文本匹配、搜索、分割、替换等等
正则表达式的优势和用途？
一种强大而灵活的文本处理工具；
提供了一种紧凑的、动态的方式，能够以一种完全通用的方式来解决各种字符串处理（例如：验证、查找、替换等）问题；
大部分语言、数据库都支持正则表达式。
正则表达式定义：
正如他的名字一样是描述了一个规则，通过这个规则可以匹配一类字符串。
正则表达式的用处：
验证给定字符串是否符合指定特征，比如验证是否是合法的邮件地址。
用来查找字符串，从一个长的文本中查找符合指定特征的字符串。
用来替换，比普通的替换更强大，用来替换满足某个规则的字符串
用来分割，比普通的分割更强大，用来分割满足某个规则的字符串
3. 工具软件的使用
3.1. 工具软件RegexBuddy的使用
为了提高开发效率，一般都先在工具软件中测试正则表达式，通过测试后，才在程序中使用。
3.2 正则表达式图形化显示网站 Regexper
由于正则表达式非常灵活，正则表达式本身的可读性非常差，所以比较复杂的正则表达式阅读起来相对比较困难，所以我们可以借助一个图形化正则表达式网站来帮助我们分析一个相对复杂的正则表达式。
正则图形化显示网站:
//regexper.com
//regexr-cn.com
图形化显示结果如下所示:
4. 正则表达式规则
4.1 普通字符
字母、数字、汉字、下划线、以及没有特殊定义的标点符号，都是“普通字符”。表达式中的普通字符，在匹配一个字符串的时候，匹配与之相同的一个字符。例如字符a, b, c ,1，2，中等等。
4.2 转义字符
4.3 字符***
[ ]方括号匹配方式，能够匹配方括号中任意一个字符
显示效果如下所示:
注意: 正则表达式中的特殊符号，如果被包含于中括号中，则失去特殊意义，但 [ ] : ^ – 除外。
4.4 预定义字符
还有一些字符是正则表达式语法事先定义好的，有特殊的含义，能够与 ‘多种字符’ 匹配的表达式
注意: 如果是D,W,S表示相反的意思。
4.5 量词
显示效果如下所示:
表达式至少重复2次，最多重复4次
至少3次:
匹配表达式0次或者1次，相当于 {0,1}.
+至少一次
表达式不出现或出现任意次，相当于 {0,}
4.6 贪婪模式和非贪婪模式
匹配次数中的贪婪模式(匹配字符越多越好)
“{m,n}”, “{m,}”, “?”, “*”, “+”，具体匹配的次数随被匹配的字符串而定。这种重复匹配不定次数的表达式在匹配过程中，总是尽可能多的匹配。
匹配次数中的非贪婪模式（匹配字符越少越好）
在修饰匹配次数的特殊符号后再加上一个 “?” 号，则可以使匹配次数不定的表达式尽可能少的匹配，使可匹配可不匹配的表达式，尽可能地 “不匹配”。
4.7 边界字符
(本组标记匹配的不是字符而是位置，符合某种条件的位置)
显示效果如下所示:
4.8 选择符和分组
选择符操作显示效果如下所示:
分组:
4.9 反向引用（nnn）
1. 每一对()会分配一个编号，使用 () 的捕获根据左括号的顺序从 1 开始自动编号。
2. 通过反向引用，可以对分组已捕获的字符串进行引用。
5. 正则表达式的匹配模式
5.1 IGNORECASE 忽略大小写模式
1. 匹配时忽略大小写。
2. 默认情况下，正则表达式是要区分大小写的。
5.2 SINGLELINE 单行模式
1. 整个文本看作一个字符串，只有一个开头，一个结尾。
2.使小数点 “.” 可以匹配包含换行符（n）在内的任意字符。
5.3 MULTILINE 多行模式
1.每行都是一个字符串，都有开头和结尾。
2.在指定了 MULTILINE 之后，如果需要仅匹配字符串开始和结束位置，可以使用 A 和 Z
6.开发中使用正则表达式的流程
1. 分析所要匹配的数据，写出测试用的典型数据
2. 在工具软件中进行匹配测试
3. 在程序中调用通过测试的正则表达式
7. 课堂练习
电话号码验证
(1)电话号码由数字和”-“构成
(2)电话号码为7到8位(不加区号)
(3)如果电话号码中包含有区号，那么区号为三位或四位, 首位是0.
(4)区号用”-“和其他部分隔开
(5)移动电话号码为11位
(6)11位移动电话号码的第一位和第二位为”13“，”15”，”18”
0(d{2,3})-d{7,8}
(13)|(15)|(18)d{9}
8. Java中使用正则表达式
相关类位于：java.util.regex包下面
类 Pattern：
正则表达式的编译表示形式。
Pattern p = Pattern.compile(r); //建立正则表达式，并启用相应模式
类 Matcher：
通过解释 Pattern 对 character sequence 执行匹配操作的引擎
Matcher m = p.***tcher(str); //匹配str字符串
编程中使用正则表达式常见情况：
验证表达式是否匹配整个字符串
验证表达式是否可以匹配字符串的子字符串
返回给定字符串中匹配给定正则表达式所有子字符串
替换给定字符串中匹配正则表达式的子字符串
根据正则表达式定义规则截取字符串
9. J***ASCRIPT中使用正则表达式
Flags可选项常见值：
g （全文查找出现的所有pattern）（没有g只会匹配一次)
i （忽略大小写）
RegExp对象常用方法：
exec():返回的是一个数组。该数组包含了匹配该模式的第一个子字符串以及该子字符串中匹配相关分组的字符串。比如：
返回的数组为：[33ff,33,ff]
test(): 返回一个 Boolean 值，它指出在被查找的字符串中是否存在模式匹配的子字符串
字符串中常用的使用正则表达式的方式：
***tch():使用正则表达式模式对字符串执行查找，并将符合该模式的所有子字符串包含到数组中返回。
结果为数组：[33ff,55tt,77uu,88yy]
search():返回与正则表达式查找内容匹配的第一个子字符串的位置
10. 针对表单域的验证，封装一个通用的函数
我们可以编写一个简单的用户名验证的方法，代码如下所示：
这里我们通过输入框失去焦点来对输入的内容进行验证，验证的步骤也非常简单，步骤基本如下所示:
1. 给表单域添加onblur失去焦点事件
2. 获取表单域输入框的内容
3. 通过正则表达式判断输入是否合法
4. 根据是否合法显示不同的页面提示信息
通过观察我们不难发现，不仅验证用户名，验证邮箱，密码，身份证等等基本上步骤都是一样的，但是有一些例如正则表达式或者显示的正确或者错误信息是变化的，所以我们可以对验证的方法进行封装，将变化的抽取成为形参，从而用于其他的表单校验，代码如下所示：
本文来自Total.不想长大投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/595815.html
微信扫一扫 
