四.js 正則表達式

時間 2019-11-20

原文原文鏈接

一。正則表達式
　　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類型javascript

練習：html

　　生日：1999-11-11
　　g.身份證號碼：18位，最後一位能夠是數字或者X
　　h.用戶名：用戶名必須包含數字，字母，下劃線。首字母大寫，長度不能小於8位
　　f.日期：格式必須知足1999-12-31 24:60:60java

實例1：正則表達式

　　普通方式驗證表單數據this

 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>

　　利用正則表達式驗證表單數據及其餘綁定事件spa

  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>