一。正则表达式
1.定义：对字符串规则的描述
2.作用：可以检查字符串是否符合规则，可以按规则来截取字符串
3.定义：
a。简单模式：var reg = /hello/;
b.复杂模式：var reg = /^规则$/;
4.具体规则：
元字符：
\d:表示一个数字。[0-9];
\D:表示一个非数字。[^0-9];
\s:表示一个空白字符
\S:表示一个非空白字符
\w:匹配一个字母或者数字或者下划线 [A-Za-z_]
\W:和\w相反
[xyz]:匹配集合中任意一个字符
匹配次数元字符：
*:表示任意次数
+：1次或者多次 {1,}
？:0次或者1次
{n}:表示匹配n次
{n,m}:表示匹配大于等于n，小于等于m次
5.检验字符串是否符合规则：
reg.test("字符串") 返回boolean类型
练习：
生日：1999-11-11
g.身份证号码：18位，最后一位可以是数字或者X
h.用户名：用户名必须包含数字，字母，下划线。首字母大写，长度不能小于8位
f.日期：格式必须满足1999-12-31 24:60:60
实例1：
普通方式验证表单数据
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <script type="text/javascript">
8 /**
9 * 1.要求所有输入不能为空
10 * 2.密码长度为固定6位，确认密码和密码必须一致
11 * 3.电子邮箱必须出现.和@符号，并且.在@符号后面
12 * 笔记：js的表单验证
13 * 1.什么是表单验证
14 * 2.验证的步骤
15 * 3.关键：如何阻止表单提交
16 */
17 function check() {
18 var username = document.getElementById("username").value;
19 var password = document.getElementById("password").value;
20 var password2 = document.getElementById("password2").value;
21 var email = document.getElementById("email").value;
22 if(username==""||username.length>10){
23 document.getElementById("error_username").innerHTML="用户名不能为空且长度不能大于10";
24 return false;
25 }else{
26 document.getElementById("error_username").innerHTML="";
27 }
28 if(password.length!=6){
29 document.getElementById("error_password").innerHTML="密码不能为空且长度固定为6";
30 return false;
31 }else{
32 document.getElementById("error_password").innerHTML="";
33 }
34 if(password!=password2){
35 document.getElementById("error_password2").innerHTML="确认密码和密码一致";
36 return false;
37 }else{
38 document.getElementById("error_password2").innerHTML="";
39 }
40 if(!(email.indexOf("@")>0&&email.indexOf(".")>email.indexOf("@"))){
41 alert("邮箱格式不正确");
42 return false;
43 }
44
45 return true;
46 }
47 </script>
48 <body>
49 <div align="center">
50 <form action="http://www.baidu.com" onsubmit="return check()">
51 用户名：<input id="username" onblur="check()"><span id="error_username" style="color: red;"></span><br>
52 密码：<input id="password" type="password" onblur="check()"><span id="error_password" style="color: red;"></span><br>
53 确认密码：<input id="password2" type="password" onblur="check()"><span id="error_password2" style="color: red;"></span><br>
54 生日：<input type="date"><br>
55 电话:<input><br>
56 电子邮箱:<input id="email" onblur="check()"><span id="error_email" style="color: red;"></span><br>
57 所在地：<input><br>
58 <input type="submit" value="注册">
59 </form>
60 </div>
61 </body>
62 </html>
利用正则表达式验证表单数据及其他绑定事件
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <script type="text/javascript">
8 /**
9 * 1.要求所有输入不能为空
10 * 2.密码长度为固定6位，确认密码和密码必须一致
11 * 3.电子邮箱必须出现.和@符号，并且.在@符号后面
12 * 笔记：js的表单验证
13 * 1.什么是表单验证
14 * 2.验证的步骤
15 * 3.关键：如何阻止表单提交
16 */
17 function checkUsername() {
18 var username = document.getElementById("username").value;
19 if(username==""||username.length>10){
20 document.getElementById("error_username").innerHTML="用户名不能为空且长度不能大于10";
21 return false;
22 }else{
23 document.getElementById("error_username").innerHTML="";
24 }
25 return true;
26 }
27 function checkPassword() {
28 var password = document.getElementById("password").value;
29 if(password.length!=6){
30 document.getElementById("error_password").innerHTML="密码不能为空且长度固定为6";
31 return false;
32 }else{
33 document.getElementById("error_password").innerHTML="";
34 return true;
35 }
36 }
37 function checkPassword2() {
38 var password = document.getElementById("password").value;
39 var password2 = document.getElementById("password2").value;
40 if(password!=password2){
41 document.getElementById("error_password2").innerHTML="确认密码和密码一致";
42 return false;
43 }else{
44 document.getElementById("error_password2").innerHTML="";
45 return true;
46 }
47 }
48 function checkEmail() {
49 var email = document.getElementById("email").value;
50 if(!(email.indexOf("@")>0&&email.indexOf(".")>email.indexOf("@"))){
51 alert("邮箱格式不正确");
52 return false;
53 }else{
54 return true;
55 }
56 }
57 function checkAll() {
58 if(checkUsername()&&checkPassword()&&checkPassword2()&&checkEmail()){
59 return true;
60 }else{
61 return false;
62 }
63 }
64 function checkAddr() {
65 var addr = document.getElementById("addr").value;
66 //声明正则表达式
67 var reg = /中国/;
68 var reg2 = new RegExp("/中国/");
69 var reg3 = /^[12]\d{3}-([1-9]|[0][1-9]|[1][0-2])$/;
70
71 /**
72 * 生日：1999-12-11
73 g.身份证号码：18位，最后一位可以是数字或者X
74 h.用户名：用户名必须包含数字，字母，下划线。首字母大写，长度不能小于8位
75 f.日期：格式必须满足1999-12-31 24:60:60
76 * @type {boolean}
77 */
78 document.getElementById("error_addr").innerHTML = reg3.test(addr);
79 }
80 function showValue(obj) {
81 alert(obj.value);
82 }
83 function readey() {
84 document.getElementById("username").addEventListener("keyup",function (e) {
85 alert(e.keyCode);
86 });
87 document.getElementById("mydiv").addEventListener("mousemove",function (e) {
88 document.getElementById("showPoint").innerHTML="x:"+e.x+"y:"+e.y;
89 });
90 }
91 function showDiv() {
92 document.getElementById("mydiv").style.display="block";
93 }
94 </script>
95 <body onload="readey()">
96 <div align="center">
97 <form action="http://www.baidu.com" onsubmit="return checkAll()">
98 用户名：<input id="username" onblur="checkUsername()"><span id="error_username" style="color: red;"></span><br>
99 密码：<input id="password" type="password" onblur="checkPassword()"><span id="error_password" style="color: red;"></span><br>
100 确认密码：<input id="password2" type="password" onblur="checkPassword2()"><span id="error_password2" style="color: red;"></span><br>
101 生日：<input type="date"><br>
102 电话:<input><br>
103 电子邮箱:<input id="email" onblur="checkEmail()"><span id="error_email" style="color: red;"></span><br>
104 所在地：<input id="addr" onblur="checkAddr()"><span id="error_addr" style="color: red;"></span><br>
105 年份:<select onchange="showValue(this)">
106 <option value="1999年">1999</option>
107 <option>2000</option>
108 <option>2001</option>
109 <option>2002</option>
110 </select>
111 <input type="submit" value="注册">
112 </form>
113 </div>
114 <div style="height: 400px;width: 400px;background-color: #b6ff7e;display: none" id="mydiv"></div>
115 <div id="showPoint"><a href="javascript:showDiv()">滚出来</a></div>
116 </body>
117 </html>
结果
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
