四.js 正则表达式

一。正则表达式
　　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>

　　结果