前端Web-JavaScript(下)

主要是补全一下JavaScript

基本对象:

String对象

语法格式

方式1：

var 变量名 = new String("…") ; //方式一

例如：

var str = new String("Hello String");

方式2：

var 变量名 = '…' ; //方式二

例如：

var str = 'Hello String';

属性和方法

String对象也提供了一些常用的属性和方法：

属性:

属性	描述
length	字符串的长度。

方法：

方法	描述
charAt()	返回在指定位置的字符。
indexOf()	检索字符串。
trim()	去除字符串两边的空格
substring()	提取字符串中两个指定的索引号之间的字符。

length属性：

length属性可以用于返回字符串的长度，添加如下代码：

//length
console.log(str.length);

charAt()函数：

charAt()函数用于返回在指定索引位置的字符，函数的参数就是索引。添加如下代码：

console.log(str.charAt(4));

indexOf()函数

indexOf()函数用于检索指定内容在字符串中的索引位置的，返回值是索引，参数是指定的内容。添加如下代码：

console.log(str.indexOf("lo"));

trim()函数

trim()函数用于去除字符串两边的空格的。添加如下代码：

var s = str.trim();
console.log(s.length);

substring()函数

substring()函数用于截取字符串的，函数有2个参数。

参数1：表示从那个索引位置开始截取。包含

参数2：表示到那个索引位置结束。不包含

console.log(s.substring(0,5));

整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-String</title>
</head>
<body>
    
</body>
<script>
    //创建字符串对象
    //var str = new String("Hello String");
    var str = "  Hello String    ";

    console.log(str);

    //length
    console.log(str.length);

    //charAt
    console.log(str.charAt(4));

    //indexOf
    console.log(str.indexOf("lo"));

    //trim
    var s = str.trim();
    console.log(s.length);

    //substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
    console.log(s.substring(0,5));

</script>
</html>

JSON对象

自定义对象

在 JavaScript 中自定义对象特别简单，其语法格式如下：

var 对象名 = {
    属性名1: 属性值1, 
    属性名2: 属性值2,
    属性名3: 属性值3,
    方法名称: function(形参列表){}
};

我们可以通过如下语法调用属性：

对象名.属性名

通过如下语法调用函数：

对象名.方法名()

代码示例:

<script>
    //自定义对象
    var user = {
        name: "soyo",
        age: 17,
        gender: "女",
        sing: function(){
             console.log("为什么要演奏春日影");
         }
    }

    console.log(user.name);
    user.eat();
<script>

简化版:

<script>
    //自定义对象
    var user = {
        name: "soyo",
        age: 17,
        gender: "女",
        sing(){
             console.log("为什么要演奏春日影");
         }
    }

    console.log(user.name);
    user.eat();
<script>

JSON介绍

JSON对象：JavaScript Object Notation，JavaScript对象标记法。JSON是通过JavaScript标记法书写的文本。其格式如下：

{
    "key":value,
    "key":value,
    "key":value
}

其中，key必须使用引号并且是双引号标记，value可以是任意数据类型。

例如我们可以直接百度搜索“json在线解析”，随便挑一个进入，然后编写内容如下：

{
	"name": "李传播"
}

但是当我们将双引号切换成单引号，再次校验，则报错，如下图所示：

而由于语法简单，层级结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

定义

var userStr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
alert(userStr.name);

浏览器输出结果如下：

因为上述是一个json格式的字符串，不是JS对象，所以我们需要借助JS中提供的JSON对象，来将json字符串和JS对象之间来完成转换。

JSON字符串 -> JS对象

var obj = JSON.parse(userStr);
alert(obj.name);

此时浏览器输出结果如下：

JS对象 -> JSON字符串

alert(JSON.stringify(obj));

浏览器输出结果如图所示：

整体全部代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-JSON</title>
</head>

<body>


    <script>
        // JSON对象
        var userStr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
        // alert(userStr.name);

        var obj = JSON.parse(userStr);
        alert(obj.name);
        
        alert(JSON.stringify(obj));
    </script>
</body>

</html>

BOM对象

BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。

也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数来完成。

例如：我们想要将浏览器的地址改为`http://www.baidu.com`,我们就可以通过BOM中提供的location对象的href属性来完成，代码如下：`location.href='http://www.baidu.com'`

BOM中提供了如下5个对象：

对象名称	描述
Window	浏览器窗口对象
Navigator	浏览器对象
Screen	屏幕对象
History	历史记录对象
Location	d地址栏对象

上述5个对象与浏览器各组成对应的关系如下图所示：

对于上述5个对象，比较常用的是Window对象、Location对象这2个。

Window对象

window对象指的是浏览器窗口对象，是JavaScript的全部对象，所以对于window对象，可以直接使用，并且对于window对象的方法和属性，可以省略window.例如：alert()函数其实是属于window对象的，其完整的代码如下：

window.alert('hello');//可以简写
alert('hello')

所以对于window对象的属性和方法，都是采用简写的方式。window提供了很多属性和方法，下表列出了常用属性和方法

window对象提供了获取其他BOM对象的属性：

属性	描述
history	用于获取history对象
location	用于获取location对象
Navigator	用于获取Navigator对象
Screen	用于获取Screen对象

要使用location对象，只需要通过代码window.location或者简写location即可使用

alert()函数：弹出警告框，函数的内容就是警告框的内容

confirm()函数：弹出确认框，并且提供用户2个按钮，分别是确认和取消。

添加如下代码：

confirm("您确认删除该记录吗?");

但是怎么知道用户点击了确认还是取消呢？所以这个函数有一个返回值，当用户点击确认时，返回true，点击取消时，返回false。根据返回值来决定是否执行后续操作。修改代码如下：再次运行，可以查看返回值true或者false

var flag = confirm("您确认删除该记录吗?");
alert(flag);

setInterval(fn,毫秒值)：定时器，用于周期性的执行某个功能，并且是循环执行。该函数需要传递2个参数：

fn:函数，需要周期性执行的功能代码

毫秒值：间隔时间

注释掉之前的代码，添加代码如下：

//定时器 - setInterval -- 周期性的执行某一个函数
var i = 0;
setInterval(function(){
     i++;
     console.log("定时器执行了"+i+"次");
},2000);

setTimeout(fn,毫秒值) ：定时器，只会在一段时间后**执行一次功能**。参数和上述setInterval一致

注释掉之前的代码，添加代码如下：

//定时器 - setTimeout -- 延迟指定时间执行一次 
setTimeout(function(){
	alert("JS");
},3000);

浏览器打开，3s后弹框，关闭弹框，发现再也不会弹框了。

Location对象

location是指代浏览器的地址栏对象，对于这个对象，我们常用的是href属性，用于获取或者设置浏览器的地址信息，添加如下代码：

//获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href = "https://www.bilibili.com";

浏览器效果如下：首先弹框展示浏览器地址栏信息，

然后点击确定后，因为我们设置了地址栏信息，所以浏览器跳转到bilibili

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-BOM</title>
</head>
<body>
    
</body>
<script>
    //获取
    // window.alert("Hello BOM");
    // alert("Hello BOM Window");

    //方法
    //confirm - 对话框 -- 确认: true , 取消: false
    // var flag = confirm("您确认删除该记录吗?");
    // alert(flag);

    //定时器 - setInterval -- 周期性的执行某一个函数
    // var i = 0;
    // setInterval(function(){
    //     i++;
    //     console.log("定时器执行了"+i+"次");
    // },2000);

    //定时器 - setTimeout -- 延迟指定时间执行一次 
    // setTimeout(function(){
    //     alert("JS");
    // },3000);
    
    //location
    alert(location.href);

    location.href = "https://www.bilibili.com";

</script>
</html>

DOM

DOM介绍

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

封装的对象分为

- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象

主要作用如下：

- 改变 HTML 元素的内容
- 改变 HTML 元素的样式（CSS）
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素

从而达到动态改变页面效果目的

DOM对象

- DOM对象：浏览器根据HTML标签生成的JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性，就会自动映射到标签身上

- DOM的核心思想：将网页的内容当做对象来处理

- document对象
- 网页中所有内容都封装在document对象中
- 它提供的属性和方法都是用来访问和操作网页内容的，如：document.write(…)

- DOM操作步骤:
- 获取DOM元素对象
- 操作DOM对象的属性或方法 (查阅文档)

获取DOM对象

可以通过如下两种方式来获取DOM元素。

根据CSS选择器来获取DOM元素，获取到匹配到的第一个元素：document.querySelector('CSS选择器');
根据CSS选择器来获取DOM元素，获取匹配到的所有元素：document.querySelectorAll('CSS选择器');

注意：获取到的所有元素，会封装到一个NodeList节点集合中，是一个伪数组（有长度、有索引的数组，但是没有push、pop等数组方法）

代码示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-DOM</title>
</head>

<body>
    <span id="sid">DOM元素1</span>
    <span class="txt">DOM元素2</span>
    <span class="txt">DOM元素3</span>

    <script>
        //根据CSS选择器获取DOM元素, 获取到匹配的第一个元素
        let s1 = document.querySelector('#sid');
        console.log(s1);
	    
        //根据CSS选择器获取DOM元素, 获取到匹配的所有元素
        let s2 = document.querySelectorAll('.txt');
        s2.forEach(s => console.log(s))
    </script>
</body>

</html>

操作属性

通过查询文档资料，如下图所示：

案例

需求：订单支付完成后，5秒之后跳转到系统首页（www.jd.com）

分析

- 要实现倒计时效果，那其实倒计时，就是每1秒钟，执行一次，把数字往下减1，直到数据减为0 。所以，这里我们需要用到一个定时器：setInterval(...)
- 跳转网页，其实控制的地址栏的地址，那这里我们就需要通过 location 来设置地址栏的信息。

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .center {
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="center">
        您好, 支付完成, <span id="time">5</span> 秒之后将自动跳转至 <a href="https://www.jd.com">官网</a> 首页 ~
    </div>
	
    <script>
        //1. 获取时间对应的DOM元素
        let time = document.querySelector('#time');

        //2. 开启定时器, 每秒将时间往下减一 , 如果时间>0 , 更新DOM元素的内容 ; 如果时间 < 0 , 则跳转页面 ;
        count = time.innerHTML;
        let timer = setInterval(() => {
            count--;
            if (count > 0) {
                time.innerHTML = count;
            } else {
                clearInterval(timer);
                location.href = 'https://www.jd.com';
            }
        }, 1000);
    </script>
</body>
</html>

JS事件

当我们用户在注册页面输入完内容，网页可以自动的提示我们用户名已经存在还是可以使用。那么是怎么知道我们用户名输入完了呢？这就需要用到JavaScript中的事件了。

事件介绍

什么是事件呢？HTML事件是发生在HTML元素上的 “事情”，例如：

- 按钮被点击
- 鼠标移到元素上
- 输入框失去焦点
- 按下键盘按键
- ........

而我们可以给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能。这就是事件监听。例如：对于我们所说的百度注册页面，我们给用户名输入框的失去焦点事件绑定函数，当我们用户输入完内容，在标签外点击了鼠标，对于用户名输入框来说，失去焦点，然后执行绑定的函数，函数进行用户名内容的校验等操作。JavaScript事件是js非常重要的一部分

所以主要围绕：

- 事件监听
- 常用事件

事件监听

JS事件监听的语法:

事件源.addEventListener('事件类型', 要执行的函数);

在上述的语法中包含三个要素:

- 事件源: 哪个dom元素触发了事件, 要获取dom元素
- 事件类型: 用什么方式触发, 比如: 鼠标单击 click, 鼠标经过 mouseover
- 要执行的函数: 要做什么事

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-事件绑定</title>
</head>

<body>
    <input type="button" id="btn1" value="点我一下">
    <input type="button" id="btn2" value="点我一下试试">
        
    <script>
        document.querySelector("#btn1").addEventListener('click', ()=>{
            alert("按钮1被点击了...");
        })
    </script>
</body>
</html>

JavaScript对于事件的绑定还提供了另外2种方式（早期版本）：

1). 通过html标签中的事件属性进行绑定

例如一个按钮，对于按钮可以绑定单机事件，可以借助标签的onclick属性，属性值指向一个函数。

<input type="button" id="btn1" value="点我一下试试" onclick="on()">
<script>
	function on(){
        alert('试试就试试')
    }
</script>

通过DOM中Element元素的事件属性进行绑定

html中的标签被加载成element对象，所以也可以通过element对象的属性来操作标签的属性。

例如一个按钮，可以绑定单机事件，可以通过DOM元素的属性，为其做事件绑定。

<body>
      <input type="button" id="btn1" value="点我一下试试1">
      
  <script>
      document.querySelector('#btn1').onclick = function(){
          alert("按钮2被点击了...");
      }
  </script>
  </body>

整体代码如下：

 <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>JS-事件-事件绑定</title>
  </head>
  
  <body>
      <input type="button" id="btn1" value="事件绑定1">
      <input type="button" id="btn2" value="事件绑定2">
      
      <script>
          document.querySelector("#btn1").addEventListener('click', ()=>{
              alert("按钮1被点击了...");
          })
  		
          document.querySelector('#btn2').onclick = function(){
              alert("按钮2被点击了...");
          }
      </script>
  </body>
  </html>

addEventListener 与 on事件区别:

- on方式会被覆盖，addEventListener 方式可以绑定多次，拥有更多特性，推荐使用 addEventListener .

常见事件

示例演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-常见事件</title>
</head>

<body>
    <form action="" style="text-align: center;">
        <input type="text" name="username" id="username">
        <input type="text" name="age" id="age">
        <input id="b1" type="submit" value="提交">
        <input id="b2" type="button" value="单击事件">
    </form>

    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center" id="last">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>



    <script>
        //click: 鼠标点击事件
        document.querySelector('#b2').addEventListener('click', () => {
            console.log("我被点击了...");
        })

        //mouseenter: 鼠标移入
        document.querySelector('#last').addEventListener('mouseenter', () => {
            console.log("鼠标移入了...");
        })

        //mouseleave: 鼠标移出
        document.querySelector('#last').addEventListener('mouseleave', () => {
            console.log("鼠标移出了...");
        })

        //keydown: 某个键盘的键被按下
        document.querySelector('#username').addEventListener('keydown', () => {
            console.log("键盘被按下了...");
        })

        //keydown: 某个键盘的键被抬起
        document.querySelector('#username').addEventListener('keyup', () => {
            console.log("键盘被抬起了...");
        })

        //blur: 失去焦点事件
        document.querySelector('#age').addEventListener('blur', () => {
            console.log("失去焦点...");
        })

        //focus: 元素获得焦点
        document.querySelector('#age').addEventListener('focus', () => {
            console.log("获得焦点...");
        })

        //input: 用户输入时触发
        document.querySelector('#age').addEventListener('input', () => {
            console.log("用户输入时触发...");
        })

        //submit: 提交表单事件
        document.querySelector('form').addEventListener('submit', () => {
            alert("表单被提交了...");
        })
    </script>
</body>

</html>

表格隔行换色案例

分析：当鼠标引入表格，呈现一个颜色，离开之后颜色马上变为默认的白色了。那这就涉及到鼠标移入事件 mouseenter、鼠标移出事件 mouseleave。

实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            /* 设置表格的宽度 */
            width: 60%;
            /* 将表格边框合并，消除单元格之间的间距 */
            border-collapse: collapse;
            /* 将表格边框间的距离设置为0，确保没有任何间距 */
            border-spacing: 0;
            /* 文本居中对齐 */
            text-align: center;
            /* 版心居中展示 */
            margin: auto;
            /* 距离顶部的外边距 */
            margin-top: 20px;
            /* 行高 */
            line-height: 30px;
            /* 字体 */
            font-family: 'Courier New', 华文中宋, monospace;
        }

        table,tr,th,td {
            /* 设置表格的边框 */
            border: 1px solid black;
        }

        h1 {
            /* 文本居中对齐 */
            text-align: center;
        }

        .footer_btn {
            /* 文本居中对齐 */
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <h1 id="title">用户信息表</h1>

    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>爱好</th>
        </tr>
        <tr class="data">
            <td>1</td>
            <td>Tom</td>
            <td>18</td>
            <td>男</td>
            <td>Java , JS , HTML , Vue</td>
        </tr>
        <tr class="data">
            <td>2</td>
            <td>Cat</td>
            <td>12</td>
            <td>女</td>
            <td>Java , JS , HTML , Vue</td>
        </tr>
        <tr class="data">
            <td>3</td>
            <td>Lee</td>
            <td>21</td>
            <td>男</td>
            <td>Java , Vue</td>
        </tr>
        <tr class="data">
            <td>4</td>
            <td>Jerry</td>
            <td>19</td>
            <td>女</td>
            <td>JS , HTML , Vue</td>
        </tr>
        <tr class="data">
            <td>5</td>
            <td>Jack</td>
            <td>25</td>
            <td>男</td>
            <td>Java</td>
        </tr>
        <tr class="data">
            <td>6</td>
            <td>Jones</td>
            <td>22</td>
            <td>女</td>
            <td>HTML , Vue</td>
        </tr>
    </table>

    <script>
        //1. 获取表格中的数据行 DOM对象
        let trs = document.querySelectorAll('.data');

        //2. 判断, 如果是奇数行, 设置背景颜色为 #FBFBD4; 如果是偶数行, 设置背景颜色为: #D9D9FA
        for (let i = 0; i < trs.length; i++) {
            const tr = trs[i];
            tr.addEventListener('mouseenter', ()=> {
                if(i % 2 == 0){ //偶数
                    tr.style = "background-color: #D9D9FA";
                }else { //奇数
                    tr.style = "background-color: #FBFBD4";
                }
            })
            
            tr.addEventListener('mouseleave', ()=> {
                tr.style = "background-color: #FFFFFF";
            })
        }
    </script>
</body>

</html>

表单校验案例

需求：完成用户注册的表单校验操作，要求做到以下两点。

1. 在表单项中输入完成，鼠标离开焦点时，进行表单项内容的校验，如果内容格式不正确，显示提示信息。

2. 在表单提交时，校验整个表单内容，如果内容格式有一项不正确，弹出提示信息，阻止表单数据提交。

分析：

JS的事件监听：离焦事件 blur，表单提交事件 submit
DOM对象操作

实现：

<!DOCTYPE html>
<html>

<head>
    <title>表单</title>
    <style>
        label {
            display: inline-block;
            width: 80px;
            text-align: right;
            margin-right: 10px;
        }

        input {
            width: 250px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .btn {
            width: 150px;
        }

        .tip {
            color: #ff0000;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div>
        <h1>用户注册</h1>
        <form>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" placeholder="用户名不能为空且长度在4-16个字符">
            <span class="tip" id="name_msg"></span> <br>

            <label for="phone">手机号：</label>
            <input type="text" id="phone" name="phone" placeholder="手机号不能为空且长度为11位">
            <span class="tip" id="phone_msg"></span>
            <br>

            <input type="submit" value="提交" class="btn">
            <input type="reset" value="重置" class="btn">
        </form>
    </div>


    <script>
        //1. 校验用户名 - 失去焦点时校验 - blur
        function checkUsername(){ //true, 合法; false, 不合法;
            let flag = true;
            let usernameValue = document.querySelector('#username').value;
            let errMsg = "";
            if(usernameValue.length < 4 || usernameValue.length > 16){
                errMsg = "用户名不合法";
                flag = false;
            }
            document.querySelector('#name_msg').innerHTML = errMsg;
            return flag;
        }
        document.querySelector('#username').addEventListener('blur', checkUsername);


        //2. 校验手机号
        function checkPhone(){ //true, 合法; false, 不合法;
            let flag = true;
            let phoneValue = document.querySelector('#phone').value;
            let errMsg = "";
            if(phoneValue.length != 11 ){
                errMsg = "手机号不合法";
                flag = false;
            }
            document.querySelector('#phone_msg').innerHTML = errMsg;
            return flag;
        }
        document.querySelector('#phone').addEventListener('blur', checkPhone)


        //3. 表单提交的时候 - 校验整个表单 - submit
        document.querySelector('form').addEventListener('submit', function(event){
            //判断用户名及手机号是否合法, 如果不合法, 提示错误信息;
            if(!checkUsername() || !checkPhone()){
                alert('表单数据不合法');
                
                //组织表单默认的提交事件
                event.preventDefault();//组织事件的默认行为
            }
        })
    </script>
</body>

</html>

注意：JavaScript中，可以通过事件对象event中的preventDefault() 方法来阻止事件的默认行为，比如阻止表单提交。

虽然表单校验功能，基于DOM操作已经完成了，成功的校验了用户名和密码的长度，长度不符合条件，直接提示错误信息，并不允许表单提交，但是对于手机号，是只要11位就可以了吗？

- 12209120990
- 11009120990
- 1220912abcd

我们发现，上述的字符串，长度都是11位，但是却不是合法的手机号。因为手机号，是需要符合特定规则的，比如全部都是数字，而且第一位，必须是1，第二位，可以是 3/4/5/6/7/8/9 ，然后后面是9位数字。

应该如何来校验类似于手机号这种，特定规则的字符串就需要通过正则表达式来校验了

正则表达式

- 介绍：正则表达式（Regular Expression，也简称为正则），定义了字符串组成的规则。

- 作用：通常用来验证数据格式、查找替换文本等。

- 定义：

- 正则表达式字面量（注意不要加引号）

const reg1 = /abc/;

创建正则对象RegExp

const reg2 = new RegExp('abc');

方法：

test(str)：判断指定字符串是否符合规则，符合返回true；不符合返回false。
语法：
1. 普通字符：大多数的字符仅能描述它们本身，这些字符称作普通字符，比如字母和数字。
2. 特殊字符：是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
3. 量词：表示要匹配的字符或表达式的数量。

符号	含义
^	表示以谁开始
$	表示以谁结束
[]	表示某个范围内的单个字符，如：[0-9]单个数字字符
.	表示任意单个字符，除了换行和行结束符
\w	代表单词字符：字母、数字、下划线（_），相当于[A-Za-z0-9_]
\d	代表数字字符：相当于[0-9]
\s	代表空格（包括换行符、制表符、空格等）

符号	含义
?	零个或一个
*	零个或多个
+	一个或多个（至少一个）
{n}	n个
{m,}	至少m个
{m,n}	至少m个，最多n个

示例：

 <script>
    let str1 = 'hello World';
    let str2 = '二哈很二o';
    let str3 = 'er哈就是很二o';
    let str4 = '二哈就是很二';

    console.log(/\w+/.test(str1)); //true
    console.log(/\w+/.test(str2)); //true
    console.log(/\w+/.test(str3)); //true
    console.log(/\w+/.test(str4)); //false

    const reg1 = /abc/;
    const reg2 = new RegExp('abc');
    console.log(reg1.test('my name is : abc')); //true
    console.log(reg2.test('my name is : abc')); //true
  </script>

通过正则表达式来校验表单中用户名、手机号具体代码如下：

<!DOCTYPE html>
<html>

<head>
    <title>表单</title>
    <style>
        label {
            display: inline-block;
            width: 80px;
            text-align: right;
            margin-right: 10px;
        }

        input {
            width: 250px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .btn {
            width: 150px;
        }

        .tip {
            color: #ff0000;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div>
        <h1>用户注册</h1>
        <form>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" placeholder="用户名不能为空且长度在4-16个字符">
            <span class="tip" id="name_msg"></span> <br>

            <label for="phone">手机号：</label>
            <input type="text" id="phone" name="phone" placeholder="手机号不能为空且长度为11位">
            <span class="tip" id="phone_msg"></span>
            <br>

            <input type="submit" value="提交" class="btn">
            <input type="reset" value="重置" class="btn">
        </form>
    </div>


    <script>
        //在鼠标离开焦点时, 校验输入框内容的长度 .
        //校验用户名
        function checkUsername(){ //true, 合法; false, 不合法;
            let flag = true;
            let usernameValue = document.querySelector('#username').value;
            let errMsg = "";
            if(!/^\w{4,16}$/.test(usernameValue)){
                errMsg = "用户名不合法";
                flag = false;
            }
            document.querySelector('#name_msg').innerHTML = errMsg;
            return flag;
        }
        document.querySelector('#username').addEventListener('blur', checkUsername)


        //校验密码
         function checkPhone(){ //true, 合法; false, 不合法;
            let flag = true;
            let phoneValue = document.querySelector('#phone').value;
            let errMsg = "";
            if(!/^1[3-9]\d{9}$/.test(phoneValue)){
                errMsg = "手机号不合法";
                flag = false;
            }
            document.querySelector('#phone_msg').innerHTML = errMsg;
            return flag;
        }
        document.querySelector('#phone').addEventListener('blur', checkPhone)


        //在表单提交时, 判断是否所有的输入框输入的值合法 .
        document.querySelector('form').addEventListener('submit', (e)=> {
            if(!checkUsername() || !checkPhone()){
                alert('表单校验失败, 不能提交表单')
                e.preventDefault();
            }
        })

    </script>
</body>

</html>

JS模块化

所谓JS模块化，指的是JS提供的一种，将JavaScript程序拆分位若干个可按需导入的单独模块的机制。

比如，我们前面实现的表单校验的案例，我们是可以把JS代码单独的抽取到一个js文件中，然后在html中引入对应的js文件即可，这样做，便于管理、提升代码的复用性。具体操作如下：

定义一个js文件，命名位 check.js

//在鼠标离开焦点时, 校验输入框内容的长度 .
//校验用户名
function checkUsername(){ //true, 合法; false, 不合法;
    let flag = true;
    let usernameValue = document.querySelector('#username').value;
    let errMsg = "";
    if(!/^\w{4,16}$/.test(usernameValue)){
        errMsg = "用户名不合法";
        flag = false;
    }
    document.querySelector('#name_msg').innerHTML = errMsg;
    return flag;
}
document.querySelector('#username').addEventListener('blur', checkUsername)


//校验密码
function checkPhone(){ //true, 合法; false, 不合法;
    let flag = true;
    let phoneValue = document.querySelector('#phone').value;
    let errMsg = "";
    if(!/^1[3-9]\d{9}$/.test(phoneValue)){
        errMsg = "手机号不合法";
        flag = false;
    }
    document.querySelector('#phone_msg').innerHTML = errMsg;
    return flag;
}
document.querySelector('#phone').addEventListener('blur', checkPhone)


//在表单提交时, 判断是否所有的输入框输入的值合法 .
document.querySelector('form').addEventListener('submit', (e)=> {
    if(!checkUsername() || !checkPhone()){
        alert('表单校验失败, 不能提交表单')
        e.preventDefault();
    }
})

在html文件中，如果需要用到上述的JS代码，直接在 script 标签中引入该js即可。

<!DOCTYPE html>
<html>

<head>
    <title>表单</title>
    <style>
        label {
            display: inline-block;
            width: 80px;
            text-align: right;
            margin-right: 10px;
        }

        input {
            width: 250px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .btn {
            width: 150px;
        }

        .tip {
            color: #ff0000;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div>
        <h1>用户注册</h1>
        <form>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" placeholder="用户名不能为空且长度在4-16个字符">
            <span class="tip" id="name_msg"></span> <br>

            <label for="phone">手机号：</label>
            <input type="text" id="phone" name="phone" placeholder="手机号不能为空且长度为11位">
            <span class="tip" id="phone_msg"></span>
            <br>

            <input type="submit" value="提交" class="btn">
            <input type="reset" value="重置" class="btn">
        </form>
    </div>


    <script src="./js/check.js"></script>
</body>

</html>

这是在html中，引入JS文件，可以直接使用 `<script src=".."></script>` 来引入。如果是在一个js文件中，需要用到另外一个js文件中的方法呢

那在JS中，就给我们提供了模块化导入、导出的操作，可以通过 `export` 关键字，来导出模块。然后在别的需要用到的地方，通过 `import` 关键字导入模块。

如下所示：

`checkFn.js` 中定义是校验方法

在变量前面加上 `export` 代表，将该变量、函数、对象导出为一个模块。别的js中要想使用，就可以 `import` 导入了。

export function checkUsername(){ //true, 合法; false, 不合法;
  let flag = true;
  let usernameValue = document.querySelector('#username').value;
  let errMsg = "";
  if(!/^\w{4,16}$/.test(usernameValue)){
      errMsg = "用户名不合法";
      flag = false;
  }
  document.querySelector('#name_msg').innerHTML = errMsg;
  return flag;
}


export function checkPhone(){ //true, 合法; false, 不合法;
  let flag = true;
  let phoneValue = document.querySelector('#phone').value;
  let errMsg = "";
  if(!/^1[3-9]\d{9}$/.test(phoneValue)){
      errMsg = "手机号不合法";
      flag = false;
  }
  document.querySelector('#phone_msg').innerHTML = errMsg;
  return flag;
}

check.js 中定义的是校验的事件监听

在check.js中需要用到 checkUsername、checkPhone函数，就可以通过 import 关键字将其导入进来。

import {checkUsername, checkPhone} from './checkFn.js'

//1. 校验用户名 - 失去焦点时校验 - blur
document.querySelector('#username').addEventListener('blur', checkUsername)

//2. 校验手机号
document.querySelector('#phone').addEventListener('blur', checkPhone)

//3. 表单提交的时候 - 校验整个表单 - submit
document.querySelector('form').addEventListener('submit', function(event){
    //判断用户名及手机号是否合法, 如果不合法, 提示错误信息;
    if(!checkUsername() || !checkPhone()){
        alert('表单数据不合法');
        
        //组织表单默认的提交事件
        event.preventDefault();//组织事件的默认行为
    }
})

`xxx.html` 中就是html的基础代码样式

注意：如果使用到了 `export`, `import` 这种模块化的js，那在通过 `<script src="..."></script>` 在引入JS文件时，必须指定 `type="module"` 属性，表名我们使用的是模块化的JS。如下所示：

<!DOCTYPE html>
<html>

<head>
    <title>表单</title>
    <style>
        label {
            display: inline-block;
            width: 80px;
            text-align: right;
            margin-right: 10px;
        }

        input {
            width: 250px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .btn {
            width: 150px;
        }

        .tip {
            color: #ff0000;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div>
        <h1>用户注册</h1>
        <form>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" placeholder="用户名不能为空且长度在4-16个字符">
            <span class="tip" id="name_msg"></span> <br>

            <label for="phone">手机号：</label>
            <input type="text" id="phone" name="phone" placeholder="手机号不能为空且长度为11位">
            <span class="tip" id="phone_msg"></span>
            <br>

            <input type="submit" value="提交" class="btn">
            <input type="reset" value="重置" class="btn">
        </form>
    </div>

	<!-- 模块化JS引入方式，需要指定type="module" -->
    <script type="module" src="./js/check.js"></script>
</body>

</html>

注意：如果使用模块的js，使用了 `export`，`import` ，要保证我们的代码，一定是在服务器端运行，而不是在磁盘中直接打开。所以运行的时候，在VSCode中已经要右键选择 "Open with Live Server"。