一。正则表达式
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; 400px;background-color: #b6ff7e;display: none" id="mydiv"></div> 115 <div id="showPoint"><a href="javascript:showDiv()">滚出来</a></div> 116 </body> 117 </html>
结果
