主要是补全一下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);//lengthconsole.log(str.length);//charAtconsole.log(str.charAt(4));//indexOfconsole.log(str.indexOf("lo"));//trimvar 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);//locationalert(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; 如果是偶数行, 设置背景颜色为: #D9D9FAfor (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. 校验用户名 - 失去焦点时校验 - blurfunction 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. 表单提交的时候 - 校验整个表单 - submitdocument.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。
-
语法：
-
普通字符：大多数的字符仅能描述它们本身，这些字符称作普通字符，比如字母和数字。
-
特殊字符：是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
-
量词：表示要匹配的字符或表达式的数量。
-
| 符号 | 含义 |
|---|---|
| ^ | 表示以谁开始 |
| $ | 表示以谁结束 |
| [] | 表示某个范围内的单个字符，如：[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)); //trueconsole.log(/\w+/.test(str2)); //trueconsole.log(/\w+/.test(str3)); //trueconsole.log(/\w+/.test(str4)); //falseconst reg1 = /abc/;const reg2 = new RegExp('abc');console.log(reg1.test('my name is : abc')); //trueconsole.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"。
![二十天刷leetcode【hot100】算法- day1[前端Typescript]](https://i-blog.csdnimg.cn/direct/6c4134ede8324736b468559ee1802413.png)
