1 <form action="">
2 输入：<input type="text" name="mazey" id="mazey" placeholder="请输入邮箱">
3 <input type="button" value="验证" onclick="check();">
4 </form>
5
6 <script>
7 function check(){
8 var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
9 var obj = document.getElementById("mazey"); //要验证的对象
10 if(obj.value === ""){ //输入不能为空
11 alert("输入不能为空!");
12 return false;
13 }else if(!reg.test(obj.value)){ //正则验证不通过，格式不对
14 alert("验证不通过!");
15 return false;
16 }else{
17 alert("通过！");
18 return true;
19 }
20 }
21 </script>
22
23 一、RegExp
24
25 1.1 创建RegExp对象
26
27 new RegExp("必选,正则表达式","可选,匹配模式g,i,m")
28 1.2 RegExp对象的方法
29
30 test:检索字符串中的指定值，返回True或False。
31 exec:检索字符串中的指定值，返回找到的值，没有则null。
32 complie:用于改变正则表达式，或增删匹配模式。
33 1.2.1 test()
34
35 var r1 = new RegExp('world');
36 console.log(r1.test('Hello, world!')); //true
37 console.log(r1.test('Hello, World!')); //false
38 var r2 = new RegExp('world', 'i'); //大小写不敏感
39 console.log(r2.test('Hello, World!')); //true
40 var r3 = new RegExp(/world/i); //简写
41 console.log(r3.test('Hello, World!')); //true
42 1.2.2 exec()
43
44 var r1 = new RegExp('world');
45 console.log(r1.exec('Hello, world!')); //['world']
46 console.log(r1.exec('Hello, World!')); //null
47 var r2 = new RegExp('world', 'i'); //大小写不敏感
48 console.log(r2.exec('Hello, World!')); //['world']
49 var r3 = new RegExp(/world/i); //简写
50 console.log(r3.exec('Hello, World!')); //['world']
51 var r4 = new RegExp('o');
52 console.log(r4.exec('Hello, World!')); //['o']
53 var r5 = new RegExp('o', 'gi');
54 console.log(r5.exec('Hello, WOrld!')); //['o']
55 console.log(r5.lastIndex); //5 匹配文本的第一个字符的位置，o为4，下一个位置为5
56 console.log(r5.exec('Hello, WOrld!')); //['O'] 匹配完第一个o后调用继续匹配
57 console.log(r5.lastIndex); //9
58 console.log(r5.exec('Hello, WOrld!')); //null 匹配不到返回null
59 console.log(r5.lastIndex); //0 lastIndex重置为0
60 1.2.3 complie()
61
62 var r1 = new RegExp('world');
63 console.log(r1.exec('Hello, world!')); //['world']
64 r1.compile('o');
65 console.log(r1.exec('Hello, World!')); //['o']
66 r1.compile('m');
67 console.log(r1.exec('Hello, World!')); //null
68 var r2 = new RegExp('world');
69 console.log(r2.test('Hello, world!')); //true
70 r2.compile('mazey');
71 console.log(r2.test('Hello, world!')); //false
72 二、正则表达式
73
74 ^$:表示匹配值的开始和结尾。
75 +:1+，一个或更多。
76 *:0+，零个或更多。
77 ?:0/1，零个或一个。
78 {1,2}:1<=length<=2,长度。
79 ():表示一个表达式的组。
80 []:匹配的字符范围，我理解为一个块，很多块放在一个组()里面。
81 三、示例
82
83 <form action="">
84 输入：<input type="text" name="mazey" id="mazey" placeholder="请输入邮箱">
85 <input type="button" value="验证" onclick="check();">
86 </form>
87 <script>
88 function check(){
89 var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
90 var obj = document.getElementById("mazey"); //要验证的对象
91 if(obj.value === ""){ //输入不能为空
92 alert("输入不能为空!");
93 return false;
94 }else if(!reg.test(obj.value)){ //正则验证不通过，格式不对
95 alert("验证不通过!");
96 return false;
97 }else{
98 alert("通过！");
99 return true;
100 }
101 }
102 </script>
