17-js中可能用到的正则表达式

最新推荐文章于 2022-12-21 14:23:45 发布

weixin_41452476

最新推荐文章于 2022-12-21 14:23:45 发布

阅读量142

点赞数

分类专栏： JS笔记

本文链接：https://blog.csdn.net/weixin_41452476/article/details/109692977

版权

JS笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1-正则表达式简介

1-1 什么是正则表达式

正则表达式：用于匹配规律规则的表达式，正则表达式最初是科学家对人类神经系统的工作原理的早期研究，现在在编程语言中有广泛的应用。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。

正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。

1-2 正则表达式的作用

给定的字符串是否符合正则表达式的过滤逻辑(匹配)
可以通过正则表达式，从字符串中获取我们想要的特定部分(提取)
强大的字符串替换能力(替换)

1-3 正则表达式的特点

灵活性、逻辑性和功能性非常的强
可以迅速地用极简单的方式达到字符串的复杂控制
对于刚接触的人来说，比较晦涩难懂

2-正则表达式组成

2-1 普通字符

普通字符包括没有显式指定为元字符的所有可打印和不可打印字符。这包括所有大写和小写字母、所有数字、所有标点符号和一些其他符号。

2-2 非打印字符

非打印字符也可以是正则表达式的组成部分。下表列出了表示非打印字符的转义序列：

字符	描述
\cx	匹配由x指明的控制字符。例如， \cM 匹配一个 Control-M 或回车符。x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。
\f	匹配一个换页符。等价于 \x0c 和 \cL。
\n	匹配一个换行符。等价于 \x0a 和 \cJ。
\r	匹配一个回车符。等价于 \x0d 和 \cM。
\s	匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。注意 Unicode 正则表达式会匹配全角空格符。
\S	匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。
\t	匹配一个制表符。等价于 \x09 和 \cI。
\v	匹配一个垂直制表符。等价于 \x0b 和 \cK。

2-3 特殊字符

所谓特殊字符，就是一些有特殊含义的字符，如上面说的 runoo*b 中的 ，简单的说就是表示任何字符串的意思。如果要查找字符串中的 * 符号，则需要对 * 进行转义，即在其前加一个 : runo*ob 匹配 runoob。
许多元字符要求在试图匹配它们时特别对待。若要匹配这些特殊字符，必须首先使字符"转义"，即，将反斜杠字符\ 放在它们前面。下表列出了正则表达式中的特殊字符：

特殊字符	描述
$	匹配输入字符串的结尾位置。如果设置了 RegExp 对象的 Multiline 属性，则 $ 也匹配 '\n' 或 '\r'。要匹配 $ 字符本身，请使用 \$。
( )	标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用。要匹配这些字符，请使用 \( 和 \)。
*	匹配前面的子表达式零次或多次。要匹配 * 字符，请使用 \*。
+	匹配前面的子表达式一次或多次。要匹配 + 字符，请使用 \+。
.	匹配除换行符 \n 之外的任何单字符。要匹配 . ，请使用 \. 。
[	标记一个中括号表达式的开始。要匹配 [，请使用 \[。
?	匹配前面的子表达式零次或一次，或指明一个非贪婪限定符。要匹配 ? 字符，请使用 \?。
\	将下一个字符标记为或特殊字符、或原义字符、或向后引用、或八进制转义符。例如， 'n' 匹配字符 'n'。'\n' 匹配换行符。序列 '\\' 匹配 "\"，而 '\(' 则匹配 "("。
^	匹配输入字符串的开始位置，除非在方括号表达式中使用，当该符号在方括号表达式中使用时，表示不接受该方括号表达式中的字符集合。要匹配 ^ 字符本身，请使用 \^。
{	标记限定符表达式的开始。要匹配 {，请使用 \{。
|	指明两项之间的一个选择。要匹配 |，请使用 \|。

2-4 限定符

限定符用来指定正则表达式的一个给定组件必须要出现多少次才能满足匹配。有 * 或 + 或 ? 或 {n} 或 {n,} 或 {n,m} 共6种。
正则表达式的限定符有：

限定符	描述
*	   匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。* 等价于{0,}。
+	   匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。
?	   匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 、 "does" 中的 "does" 、 "doxy" 中的 "do" 。? 等价于 {0,1}。
{n}	   n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。
{n,}   n 是一个非负整数。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。
{n,m}  m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，"o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。

2-5 定位符

定位符使您能够将正则表达式固定到行首或行尾。它们还使您能够创建这样的正则表达式，这些正则表达式出现在一个单词内、在一个单词的开头或者一个单词的结尾。

定位符用来描述字符串或单词的边界，^ 和 $ 分别指字符串的开始与结束，\b 描述单词的前或后边界，\B 表示非单词边界。

注意：不能将限定符与定位符一起使用。由于在紧靠换行或者单词边界的前面或后面不能有一个以上位置，因此不允许诸如 ^* 之类的表达式。

若要匹配一行文本开始处的文本，请在正则表达式的开始使用 ^ 字符。不要将 ^ 的这种用法与中括号表达式内的用法混淆。

若要匹配一行文本的结束处的文本，请在正则表达式的结束处使用 $ 字符。
正则表达式的定位符有：

定位符	描述
^	匹配输入字符串开始的位置。如果设置了 RegExp 对象的 Multiline 属性，^ 还会与 \n 或 \r 之后的位置匹配。
$	匹配输入字符串结尾的位置。如果设置了 RegExp 对象的 Multiline 属性，$ 还会与 \n 或 \r 之前的位置匹配。
\b	匹配一个单词边界，即字与空格间的位置。
\B	非单词边界匹配。

2-6 修饰符

标记也称为修饰符，正则表达式的标记用于指定额外的匹配策略。
标记不写在正则表达式里，标记位于表达式之外，格式如下：
/pattern/flags

修饰符	含义	描述
i	ignore - 不区分大小写	将匹配设置为不区分大小写，搜索时不区分大小写: A 和 a 没有区别。
g	global - 全局匹配	查找所有的匹配项。
m	multi line - 多行匹配	使边界字符 ^ 和 $ 匹配每一行的开头和结尾，记住是多行，而不是整个字符串的开头和结尾。
s	特殊字符圆点 . 中包含换行符 \n	默认情况下的圆点 . 是 匹配除换行符 \n 之外的任何字符，加上 s 修饰符之后, . 中包含换行符 \n。

2-7 元字符

字符	描述
\	
将下一个字符标记为一个特殊字符、或一个原义字符、或一个 向后引用、或一个八进制转义符。例如，'n' 匹配字符 "n"。'\n' 匹配一个换行符。序列 '\\' 匹配 "\" 而 "\(" 则匹配 "("。

^	
匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配 '\n' 或 '\r' 之后的位置。

$	
匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性，$ 也匹配 '\n' 或 '\r' 之前的位置。

*	
匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。* 等价于{0,}。

+	
匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。

?	
匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 或 "does" 。? 等价于 {0,1}。

{n}	
n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。

{n,}	
n 是一个非负整数。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。

{n,m}	
m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，"o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。

?	
当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串 "oooo"，'o+?' 将匹配单个 "o"，而 'o+' 将匹配所有 'o'。

.	
匹配除换行符（\n、\r）之外的任何单个字符。要匹配包括 '\n' 在内的任何字符，请使用像"(.|\n)"的模式。

(pattern)	
匹配 pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在JScript 中则使用 $0…$9 属性。要匹配圆括号字符，请使用 '\(' 或 '\)'。

(?:pattern)	
匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如， 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。

(?=pattern)	
正向肯定预查（look ahead positive assert），在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如，"Windows(?=95|98|NT|2000)"能匹配"Windows2000"中的"Windows"，但不能匹配"Windows3.1"中的"Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。

(?!pattern)	
正向否定预查(negative assert)，在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如"Windows(?!95|98|NT|2000)"能匹配"Windows3.1"中的"Windows"，但不能匹配"Windows2000"中的"Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。

(?<=pattern)	反向(look behind)肯定预查，与正向肯定预查类似，只是方向相反。例如，"(?<=95|98|NT|2000)Windows"能匹配"2000Windows"中的"Windows"，但不能匹配"3.1Windows"中的"Windows"。
(?<!pattern)	反向否定预查，与正向否定预查类似，只是方向相反。例如"(?<!95|98|NT|2000)Windows"能匹配"3.1Windows"中的"Windows"，但不能匹配"2000Windows"中的"Windows"。
x|y	
匹配 x 或 y。例如，'z|food' 能匹配 "z" 或 "food"。'(z|f)ood' 则匹配 "zood" 或 "food"。

[xyz]	
字符集合。匹配所包含的任意一个字符。例如， '[abc]' 可以匹配 "plain" 中的 'a'。

[^xyz]	
负值字符集合。匹配未包含的任意字符。例如， '[^abc]' 可以匹配 "plain" 中的'p'、'l'、'i'、'n'。

[a-z]	
字符范围。匹配指定范围内的任意字符。例如，'[a-z]' 可以匹配 'a' 到 'z' 范围内的任意小写字母字符。

[^a-z]	
负值字符范围。匹配任何不在指定范围内的任意字符。例如，'[^a-z]' 可以匹配任何不在 'a' 到 'z' 范围内的任意字符。

\b	
匹配一个单词边界，也就是指单词和空格间的位置。例如， 'er\b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。

\B	
匹配非单词边界。'er\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。

\cx	
匹配由 x 指明的控制字符。例如， \cM 匹配一个 Control-M 或回车符。x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。

\d	
匹配一个数字字符。等价于 [0-9]。

\D	
匹配一个非数字字符。等价于 [^0-9]。

\f	
匹配一个换页符。等价于 \x0c 和 \cL。

\n	
匹配一个换行符。等价于 \x0a 和 \cJ。

\r	
匹配一个回车符。等价于 \x0d 和 \cM。

\s	
匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。

\S	
匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。

\t	
匹配一个制表符。等价于 \x09 和 \cI。

\v	
匹配一个垂直制表符。等价于 \x0b 和 \cK。

\w	
匹配字母、数字、下划线。等价于'[A-Za-z0-9_]'。

\W	
匹配非字母、数字、下划线。等价于 '[^A-Za-z0-9_]'。

\xn	
匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如，'\x41' 匹配 "A"。'\x041' 则等价于 '\x04' & "1"。正则表达式中可以使用 ASCII 编码。

\num	
匹配 num，其中 num 是一个正整数。对所获取的匹配的引用。例如，'(.)\1' 匹配两个连续的相同字符。

\n	
标识一个八进制转义值或一个向后引用。如果 \n 之前至少 n 个获取的子表达式，则 n 为向后引用。否则，如果 n 为八进制数字 (0-7)，则 n 为一个八进制转义值。

\nm	
标识一个八进制转义值或一个向后引用。如果 \nm 之前至少有 nm 个获得子表达式，则 nm 为向后引用。如果 \nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的向后引用。如果前面的条件都不满足，若 n 和 m 均为八进制数字 (0-7)，则 \nm 将匹配八进制转义值 nm。

\nml	
如果 n 为八进制数字 (0-3)，且 m 和 l 均为八进制数字 (0-7)，则匹配八进制转义值 nml。

\un	
匹配 n，其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如， \u00A9 匹配版权符号 (?)。

3- js中正则对象的定义

	//定义：两种方式
	//a. /普通字符+特殊字符/修饰符
	// var reg = /a/;//目标字符串是否至少包含一个a
	// var str = "bc";
	//reg.test("目标字符串"):返回true或false
	//console.log(reg.test(str));
	
	//b 构造方法
	//var reg = new RegExp("普通字符+特殊字符",["修饰符"]);
	var reg = new RegExp("a");//至少包含一个a
	console.log(reg.test("heiahei"));

4-js常用的符号

/**
	 *正则表达式:也叫规则表达式 按照一定的规则组成的一个表达式 这个表达式的作用主要是匹配字符串的 
	 *我的电话是:10086 他的电话时:10010 你的电话:10000 
	 *正则表达式 把这个字符串中的所有数字找到
	 *
	 *正则表达式的作用:匹配字符串
	 *
	 *在大多数编程语言中都可以使用
	 *
	 *正则表达式的组成:是由元字符或者时限定符组成的一个式子
	 *
	 *
	 *元字符：
	 *  . 表示的是：除了\n以外的任意一个字符
	 *
	 * [] 表示的是：范围，[0-9]表示的就是0到9之间的任意的一个数字,"789" [0-9]
	 * [1-7]表示的是：1到7之间的任意的一个数字
	 * [a-z]表示的是：所有的小写的字母中的任意一个
	 * [A-Z]表示的是: 所有的大写的字母中的任意一个
	 * [a-zA-Z]表示的是:所有的字母的任意一个
	 * [0-9a-zA-Z]表示的是：所有的数字或者是字母中的一个
	 * [] 另一个函数：把正则表达式中的元字符的意义干掉    [.]就是一个.
	 * |或者 [0-9]|[a-z]表示的是要么是一个数字要么是一个小写的字母
	 * ()分组 提升优先级 [0-9]|([a-z])|[A-Z]
	 * ([0-9])([1-5])([a-z])三组 从左边开始计算
	 * (()(()))
	 *
	 * 都是元字符 但是也可以叫限定符 下面这些：
	 *  * 表示的是：前面的表达式出现了0次到多次
	 *  [a-z][0-9]* 小写字母中的任意一个 后面是要么是没有数字的 要么是多个数字的
	 *
	 * + 表示的是:前面的表达式出现了1次到多次
	 * [a-z][0-9]+ 小写字母一个和后面最少一个9或者多个9
	 *
	 * ? 表示的是：前面的表达式出现了0次到1次 最少是0次最多是1次 另一个含义：阻止贪婪模式
	 * [4][a-z]? "13213214ij"
	 * 限定符:限定前面的表达是出现的次数
	 * {} 更加明确前面的表达式出现的次数
	 * {0,}表示的是前面的表达式出现了0次到多次 和*一样的
	 * {1,}表示的是前面的表达式出现了1次到多次 和+一样的
	 * {0,1}表示的是前面的表达式出现了0次到1次  和?一样的
	 * {5,10}表示的是前面的表达式出现了5次到10次
	 * {4}前面的表达式出现了4次
	 * {,10}错误的========不能这么写 
	 * ^ 表示的是以什么开始 或者是取非(取反) ^[0-9] 以数字开头
	 * ^[a-z]以小写字母开始
	 * [^0-9]取反 非数字
	 * [^a-z]非小写字母
	 * [^0-9a-zA-Z]
	 * $表示的是以什么结束 [0-9][a-z]$ 必须以小写字母结束
	 * ^[0-9][a-z]相当于是一个严格模式
	 * \d  数字中的任意一个
	 * \D 非数字中的一个
	 * \s 空白符中的一个
	 * \w 非特殊符号
	 * \W 特殊符号
	 * \b 单词的边界
	 *
	 *
	 * . 除了\n以外的任意一个单个字符
	 * []范围
	 * ()分组 提升优先级
	 * | 或者
	 * * 0-多次
	 * + 1-多次
	 * ? 0-1次
	 * {0,}和*一样
	 * {1,}和+
	 * {0,1}和?
	 *
	 * 
	 *  
	 *
	 * 
	 *写正则表达式 根据字符串来写正则表达式进行匹配
	 *
	 *经验:1、找规律 2、不要追求完美
	 *
	 * 
	 */
	   //身份证的正则表达式
	   //15位或者18位  6 1032319950223802  3
	   // ([1-9][0-9]{14})|([1-9][0-9]{16}[0-9xX])
	   // ([1-9][0-9]{14})([0-9]{2}[0-9xX])?
	   
	  //1、座机号码的正则表达式  010-19876754  0431-87123490  
	         [0-9]{3,4}[-][0-9]{8}
	         \d{3,4}[-]\d{8}
	         \d{3,4}[-][0-9]{8}


	  //2、qq号码的正则表达式
	  		[1-9][0-9]{4,10}
	  		\d{5,11}


	  //3、手机号码的正则表达式
	     130 131 132 133 134 135 136 137 138 139
	     143 147
	     150 151 152 153 154 155 156 157 158 159
	     170 171 173 176 177
	     180 181 182 183 184 185 186 187 188 189

	     ([1][358][0-9][0-9]{8})|([1][4][37][0-9]{8})|([1][7][01367][0-9]{8})
	     \d{11}

	 //4、邮箱的正则表达式
	  
	 	hdsjhfs_3.-fd@itcast.com.cn

        [0-9a-zA-Z.-]+[@][0-9a-zA-Z.-]+([.][a-zA-Z]+){1,2}
	</script>

5-js中正则对象常用的方法或属性

5-1 .test判断内容是否和正则表达式匹配

   var reg = new RegExp("a");//至少包含一个a
   console.log(reg.test("heiahei"));

5-2 .exec 根据正则表达式查找，结果满足,会返回一个长度为1的数组（数组只有一个值）

	 var reg = /\d/g; //g全局概念
	 var str = "1a2b3c";
	
	 console.log(reg.exec(str)[0]);
	 console.log(reg.exec(str)[0]);

5-3 正则中相关字符串的方法

	1 search方法  返回与正则表达式查找内容匹配的第一个子字符串的位置
	找不到返回-1
	用法:str.search(reg)
	
	var str = "hello GE Bi de wang shu shu";
	
	var reg = /ge bi/ig;//忽略大小写
	
	console.log(str.search(reg));
	
	2 match 方法
	使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回。
	str.match(rgExp)
	var reg = /\d+/g;
	var str = "123a4356a987";
	console.log(str.match(reg));
	
	3 replace 方法
	返回根据正则表达式进行文字替换后的字符串的复制。
	stringObj.replace(rgExp, replaceText)
	var str = "zhenzhen de ge bi zhu zhe zhenzhen";
	str = str.replace(/zhenzhen/g,"laowang");
	
	console.log(str);

6-小案例

6-1 验证密码强度一

<style>
		#dv{
			width: 300px;
			height: 200px;
			position: absolute;
			left: 300px;
			top: 100px;
		}
		.strengthLv0{
			height: 6px;
			width: 120px;
			border: 1px solid #ccc;
			padding: 2px;
		}
		.strengthLv1{
			background: red;
			height: 6px;
			width: 40px;
			border: 1px solid #ccc;
			padding: 2px;
		}
		.strengthLv2{
			background: orange;
			height: 6px;
			width: 80px;
			border: 1px solid #ccc;
			padding: 2px;

		}
		.strengthLv3{
			background: green;
			height: 6px;
			width: 120px;
			border: 1px solid #ccc;
			padding: 2px;
		}
	</style>
</head>
<body>
	<div id="dv">
		<label for="pwd">密码</label>
		<input type="text" id="pwd" maxlength="16">
		<div>
			<em>密码强度: </em>
			<em id="strength"></em>
			<div id="strengthLevel" class="strengthLv0"></div>
		</div>
	</div>
	<script src="common.js"></script>
	<script>
	//获取文本框注册键盘抬起事件
		my$("pwd").onkeyup = function(){
			//每次键盘抬起的时候都要获取文本框的内容 验证文本框中有什么东西 得到一个级别 然后 下面的div显示对应的颜色
			 // if (this.value.length>=6) {
			 //    var lv1 = getLv1(this.value);
			 //    console.log(lv1);
			 // 	my$("strengthLevel").className = "strengthLv"+lv1;
			 // }else{
			 // 	my$("strengthLevel").className = "strengthLv0";
			 // }

			 my$("strengthLevel").className = "strengthLv"+(this.value.length>=6 ? getLv1(this.value):0);
		}

		//给我密码 我返回对应的级别
		 function getLv1(pwd){
		 	var lv1 = 0;//默认式0级
		 	//密码中是否有数字 或者是字母 或者是特殊符号
		 	if (/[0-9]/.test(pwd)) {
		 		lv1++;
		 	}
		 	//判断密码中有没有字母
		 	if(/[a-zA-Z]/.test(pwd)){
		 		lv1++;
		 	}
		 	//判断有没有特殊字符
		 	if(/[^0-9a-zA-Z]/.test(pwd)) {
		 		lv1++;
		 	}
		 	return lv1;//最小值是1 最大值是3
		 }
	</script>
</body>

6-2 密码强度二

	<body>
		<input type="text"  />
		<button type="button">测试</button>
	</body>
<script>
	//数字  字母   其他字符
	
	//只能
	var regNum = /^\d+$/;
	var regLetter = /^[a-zA-Z]+$/;
	var regchar = /^[!@#]+$/;
	
	//包含
	var _regNum = /\d+/;
	var _regLetter = /[a-zA-Z]+/;
	var _regchar = /[!@#]+/;
	
	var oText = document.querySelector("input");
	
	var oBtn = document.querySelector("button");
	
	oBtn.onclick = function(){
		if(regNum.test(oText.value) || regLetter.test(oText.value) || regchar.test(oText.value)){
			alert("弱");
		}else if(_regNum.test(oText.value) && _regLetter.test(oText.value) && _regchar.test(oText.value)){
			alert("强");
		}else{
			alert("中");
		}
	}
</script>

6-3 表单验证一

	<body>
		<form action="ok.html" method="get">
			姓名:<input type="text"/><span></span><br/>
			密码:<input type="text"/><span></span><br/>
			<input type="submit" value="提交"/>
		</form>
	</body>
<script>
	var oF = document.querySelector("form");
	var oTexts = document.querySelectorAll("input");
	var flagName = false;
	var flagPwd = false;
	var oSpans = document.querySelectorAll("span");
	
	var regName = /^\w{6,18}$/;
	var regPwd = /^.{6,}$/;
	
	oTexts[0].onblur = function(){
		if(regName.test(this.value)){
			flagName = true;
			oSpans[0].innerHTML = "用户名输入合法";
		}else{
			flagName = false;
			oSpans[0].innerHTML = "用户名尿了";
		}
	}
	
	oTexts[1].onblur = function(){
		if(regPwd.test(this.value)){
			flagPwd = true;
			oSpans[1].innerHTML = "密码输入合法";
		}else{
			flagPwd = false;
			oSpans[1].innerHTML = "密码尿了";
		}
	}
	
	oF.onsubmit = function(){
		if(flagName && flagPwd){
			return true;
		}else{
			return false;
		}
	}
</script>

6-4 表单验证二

<style>
		body{
			background: #ccc;
		}
		label{
			width: 40px;
			display: inline-block;
		}
		span{
			color: red;
		}
		.container{
			margin: 100px auto;
			width: 400px;
			padding: 50px;
			line-height: 40px;
			border: 1px solid #999;
			background: #efefef;
		}
		span{
			margin-left: 30px;
			font-size: 12px;
		}
		.wrong{
			color: red;
		}
		.right{
			color: green;
		}
		.defau{
			width: 200px;
			height: 200px;
		}
		.del{
			background-position: 0 -20px;
		}


	</style>
</head>
<body>
	<div class="container" id="dv">
		<label for="qq">Q Q</label><input type="text" id="qq"><span></span><br />
		<label>手机</label><input type="text" id="phone"><span></span><br />
		<label>邮箱</label><input type="text" id="e-mail"><span></span><br />
		<label>座机</label><input type="text" id="telephone"><span></span><br />
		<label>姓名</label><input type="text" id="fullName"><span></span><br />
	</div>
	<script src="common.js"></script>
	<script>
		//qq的
		checkInput(my$("qq"),/^\d{5,11}$/);
		//手机的
		checkInput(my$("phone"),/^\d{11}$/);
		//邮箱的
		checkInput(my$("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
		//座机号码
		checkInput(my$("telephone"),/^\d{3,4}[-]\d{7,8}$/);
		//中文名字
		checkInput(my$("fullName"),/^[\u4e00-\u9fa5]{2,6}$/);

		//给我文本框 给我这个文本框相应的正则表达式 我把结果显示出来
		//通过正则表达式验证当前的文本框是否匹配并显示出来
		function checkInput(input,reg){
			//文本框注册失去焦点的事件
			input.onblur = function(){
				if (reg.test(this.value)) {
					this.nextElementSibling.innerText = "正确了";
					this.nextElementSibling.style.color = "green";
				}else{
					this.nextElementSibling.innerText = "输入错误";
					this.nextElementSibling.style.color = "red";
				}
			};
		}
	</script>
</body>

weixin_41452476

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
17-js中可能用到的正则表达式

1-正则表达式简介1-1 什么是正则表达式正则表达式：用于匹配规律规则的表达式，正则表达式最初是科学家对人类神经系统的工作原理的早期研究，现在在编程语言中有广泛的应用。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。1-2 正则表达式的作用给定的字符串是否符合正则表达式的过滤逻辑(匹配)可以通过正则表达式，从字符串中获
复制链接

扫一扫