前端三剑客 HTML+CSS+JavaScript 学习笔记

霁晨晨晨

已于 2022-12-10 01:33:49 修改

阅读量6k

点赞数 5

文章标签：前端 javascript html css

于 2022-12-10 00:51:11 首次发布

本文链接：https://blog.csdn.net/jichencsdn/article/details/128218776

版权

在这里插入图片描述

总结了一些关于前端 HTML&CSS&JavaScript 的知识点，比较适合初学者快速了解和入门〝前端三剑客〞

全文思维导图(大纲)
在这里插入图片描述

1. HTML(结构)

1.1. 概述

HTML(HyperText Markup Language): 超文本标记语言
超文本: 越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
标记语言: 标签构成的语言

1.2. 基础标签

1. 标题标签

在 body 标签中书写标签

· 标题标签中 h1最大，h6最小

在这里插入图片描述

· 效果
在这里插入图片描述

2. 横线便签

在页面文件中书写 hr 标签

<hr>

效果如下

3. 字体标签

· font：字体标签

· face 属性：用来设置字体。如 “楷体”、"宋体"等

· color 属性：设置文字颜色

· size 属性：设置文字大小

<font face="楷体" size="5" color="#ff0000">html演示</font>

html演示

4. 换行标签

在需要换行的地方加上换行标签（br标签）

<br>

5. 段落标签

<p>段落</p>

6. 加粗、斜体、下划线标签

· b：加粗标签

· i：斜体标签

· u：下划线标签，在文字的下方有一条横线

在这里插入图片描述

7. 居中标签

<center>内容</center>

在这里插入图片描述

8. 特殊字符

转义字符

在这里插入图片描述

1.3. 图片、音频、视频标签

1. 定义图片

· src：规定显示图像的 URL

· height：定义图像的高度

· width：定义图像的宽度

2. 定义音频

· 支持的音频格式：MP3、WAV、OGG

· src：规定音频的 URL

· controls：显示播放控件

3. 定义视频

· 支持的音频格式：MP4, WebM、OGG

· src：规定视频的 URL

· controls：显示播放控件

4. 尺寸单位

· height属性和width属性有两种设置方式

· 像素：单位是px

· 百分比。占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）

5. 资源路径

· 图片，音频，视频标签都有src属性，而src是用来指定对应的图片，音频，视频文件的路径

· 绝对路径：完整路径
这里的绝对路径是网络中的绝对路径。格式为：协议://ip地址:端口号/资源名称。

· 相对路径：相对位置关系
找页面和其他资源的相对路径。
./ 表示当前路径
…/ 表示上一级路径
…/…/ 表示上两级路径

1.4. 超链接标签

定义超链接, 用于链接到另一个资源
href：指定访问资源的URL (#为本网址)
target：指定打开资源的方式 - _self：在当前页面打开 (默认值) - _blank：在空白页面打开
代码演示

在这里插入图片描述

1.5. 列表标签

1. 有序列表

在这里插入图片描述

有序列表中的 type 属性用来指定标记的标号的类型（数字、字母、罗马数字等）

2. 无序列表

在这里插入图片描述

无序列表中的 type 属性用来指定标记的形状
代码演示

在这里插入图片描述

1.6. 表格标签

table ：定义表格 - border：规定表格边框的宽度 - width ：规定表格的宽度 - cellspacing：规定单元格之间的空白
th：定义表头单元格
tr ：定义行 - align：定义表格行的内容对齐方式
td ：定义单元格 - rowspan:规定单元格可横跨的行数 - colspan:规定单元格可横跨的列数

代码演示

在这里插入图片描述

1.7. 布局标签

span：用于组合行内元素在浏览器上没有换行效果
div：定义HTML文档中的一个区域部分, 常与CSS一起使用, 用来布局网页在浏览器上会有换行的效果

代码演示

在这里插入图片描述

1.8. 表单标签

表单：在网页中主要负责数据采集功能，使用标签定义表单
表单项(元素)：不同类型的 input 元素、下拉列表、文本域等

常用标签

在这里插入图片描述

1. from标签属性

action：规定当提交表单时向何处发送表单数据，该属性值就是URL
method ：规定用于发送表单数据的方式(get、post)
- get：默认值。如果不设置method属性则默认就是该值
  - 请求参数会拼接在URL后边
  - url的长度有限制 4KB
- post：
  - 浏览器会将数据放到http请求消息体中
  - 请求参数无限制的

2. 表单项标签

：表单项
- 通过type属性控制输入形式
  - text 一行文本
  - password 密码, 输入则显示 *
  - radio 单选按钮, name属性必行拥有相同的值
  - checkbox 多选按钮
  - file 上传文件按钮
  - submit 提交按钮
  - reset 重置按钮
  - button 普通按钮
- placeholder 该属性为文字提醒, 不影响输入信息
- checked 该属性为默认选择此选项的内容
select：定义下拉列表
option 定义列表项
- selected 默认选择此选项的内容
textarea：文本域
- 可以输入多行文本，而 input 数据框只能输入一行文本
- cols 文本框的宽度
- rows 文本框的高度
- name 文本框的名字
注意
- 标签项的内容要想提交，必须得定义 name 属性。
- 每一个标签都有id属性，id属性值是唯一的标识。
- 单选框、复选框、下拉列表需要使用 value 属性指定提交的值。

3. 返回顶部

<span id="top"></span> 顶部位置
<中间代码. . .>
<a href="#top"></a> 返回顶部

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册练习</title>
</head>
<body>
<span id="top">首页</span>

<span>a</span><br>
<span>a</span><br>
<span>a</span><br>
<span>a</span><br>
<span>a</span><br>
<span>a</span><br>
... ...

<a href="#top">返回顶部</a>
</body>
</html>

注册页面练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册练习</title>
</head>
<body>
<span id="top">首页</span>

<form action="#">
    <label for="un">用户名:</label> <input id="un" type="text" name="username" placeholder="请输入用户名"> <br>
    <label for="pw">密  码:</label> <input id="pw" type="password" name="password" placeholder="请输入密码"><br>

    <spen>性别:</spen>
    <label for="man">男</label><input type="radio" id="man" name="gender" value="1" checked>
    <label for="woman">女</label><input type="radio" id="woman" name="gender" value="0"><br>

    <span>爱好:</span>
    <input type="checkbox" value="lvyou" checked>旅游
    <input type="checkbox" value="dianying">电影
    <input type="checkbox" value="youxi">游戏<br>

    <span>头像:</span>    <select>
    <option value="beijing" selected>北京</option>
    <option value="shanghai">上海</option>
    <input type="file"><br>

    <span>城市:</span>

        <option value="guangzhou">广州</option>
    </select><br>

    <span>个人描述:</span>
    <textarea cols="40" rows="5" name="desc" ></textarea>
    <br/>
    <br/>

    <input type="submit" value="免费注册">
    <input type="reset" value="重置">
    <input type="button" value="普通按钮"><br>


</form>
<a href="#top">返回顶部</a>
</body>
</html>

网页效果图

在这里插入图片描述

2. CSS(表现)

2.1概述

Cascading Style Sheet（层叠样式表）

2.2导入方式

1. 内联样式

在标签内部使用style属性，属性值是css属性键值对

<div style="color: red">Hello CSS~</div>

该方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性比较差。

2. 内部样式

定义style标签，在标签内部定义css样式

<style type="text/css">
	div{
		color: red;
  }
</style>

这种方式可以做到在该页面中复用。

3. 外部样式

定义link标签，引入外部的css文件

编写一个css文件。名为：demo.css，内容如下:

div{
	color: red;
}

· 在html中引入 css 文件。
<link rel="stylesheet"  href="demo.css">

这种方式可以在多个页面复用。其他的页面想使用同样的样式，只需要使用 link 标签引入该css文件。

在这里插入图片描述

编写页面 02-导入方式.html

在这里插入图片描述

2.3. CSS选择器

1. 元素选择器

在这里插入图片描述

2. id选择器

在这里插入图片描述

3. 类选择器

在这里插入图片描述

4.代码演示

在这里插入图片描述

5. 优先级

id > 类 >元素(id 优先类优先元素)

3. JavaScript(行为)

3.1. 概述

JavaScript 是一门跨平台、面向对象的脚本语言。无需编译，由浏览器直接解析并执行
(JavaScript = ECMAScript + DOM + BOM)

3.2. 基本功能

1. 改变页面内容

在这里插入图片描述

2. 修改指定元素的属性值

在这里插入图片描述

3. 对表单进行校验

在这里插入图片描述

3.3. 引入方式

1. 内部脚本

将 JS代码定义在HTML页面中
在 HTML 中，JavaScript 代码必须位于标签之间
alert(数据)
- alert(数据) 是 JavaScript 的一个方法，作用是将参数数据以浏览器弹框的形式输出出来。
代码演示

在这里插入图片描述

效果图

在这里插入图片描述

注意

在 HTML 文档中可以在任意地方，放置任意数量的

2. 外部脚本

将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

步骤如下

第一步

在这里插入图片描述

第二步

在这里插入图片描述

注意
- 外部脚本不能包含 script 标签
  在js文件中直接写 js 代码即可，不要在 js文件中写 script 标签
```
  <script> 标签不能自闭合
  在页面中引入外部js文件时，不能写成 <script src="../js/demo.js" />。
```

3.4. 基础语法

1. 书写语法

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的

每行结尾的分号可有可无
如果一行上写多个语句时，必须加分号用来区分多个语句。
注释
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
注意：JavaScript 没有文档注释
大括号表示代码块例:
```
if (count == 3) { 
  alert(count); 
} 
```

2. 输出语句

window.alert() 写入警告框

代码演示

在这里插入图片描述

效果图

在这里插入图片描述

document.write() 写入 HTML 输出

代码演示

在这里插入图片描述

效果图

在这里插入图片描述

console.log() 写入浏览器控制台

代码演示

在这里插入图片描述

效果图(可以按F12、点击鼠标右键-检查或者进去浏览器菜单-工具-开发者工具都可以查看控制台信息)

在这里插入图片描述

查看浏览器控制台方式

方式一

在这里插入图片描述

方式二

在这里插入图片描述

3. 变量

格式 var 变量名 = 数据值;
JavaScript 是一门弱类型语言，变量可以存放不同类型的值
变量名命名规则和java语言基本相同
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
- 数字不能开头
- 建议使用驼峰命名

var关键字

在这里插入图片描述

注意

在这里插入图片描述

4. 数据类型

使用 typeof 运算符可以获取数据类型
alert(typeof age); 以弹框的形式将 age 变量的数据类型输出

原始类型

1, number

数字（整数、小数、NaN(Not a Number)）
注意: NaN是一个特殊的number类型的值

• 代码演示

在这里插入图片描述

2, string

字符、字符串，单双引皆可
注意: 在 js 中双引号和单引号都表示字符串类型的数据

• 代码演示

在这里插入图片描述

3, boolean

布尔。true，false

• 代码演示

在这里插入图片描述

boolean的取值规则
undefined
null
false
0(包含+0和-0)
NaN
空字符串(”)
以上六种结果为false,其它为true

4, null

对象为空

• 代码演示

在这里插入图片描述

5, undefined

当声明的变量未初始化时，该变量的默认值是 undefined

• 代码演示

引用类型

Object基本上除了基本数据类型都是引用数据类型，如Array、Function、Date、RegExp、Error和自定义封装类等Object类型(根类)。

5. 运算符

基本与Java语言相同

在这里插入图片描述

== 和 === 区别

==：
1. 判断类型是否一样，如果不一样，则进行类型转换
2. 再去比较其值
===：js 中的全等于
1. 判断类型是否一样，如果不一样，直接返回false
2. 再去比较其值

在这里插入图片描述

==类型转换

1, string 转换为 number 类型

在这里插入图片描述

2, boolean 转换为 number 类型：true 转为1，false转为0

在这里插入图片描述

3, 其他类型转为boolean

在这里插入图片描述

取值规则:
undefined
null
false
0(包含+0和-0)
NaN
空字符串(”)
以上六种结果为false,其它为true

6. 流程控制语句

JavaScript 中提供了和 Java 一样的流程控制语句

• if 语句

在这里插入图片描述

• switch 语句

在这里插入图片描述

• for 循环语句

在这里插入图片描述

• 增强for 循环语句

在这里插入图片描述

• while 循环语句

在这里插入图片描述

• dowhile 循环语句

在这里插入图片描述

7. 函数

函数（就是Java中的方法）是被设计为执行特定任务的代码块；JavaScript 函数通过 function 关键词进行定义。
- 定义方式

在这里插入图片描述

注意

在这里插入图片描述

函数调用
- 函数调用函数：
  函数名称(实际参数列表);
  let result = add(10,20);
注意

JS中，函数调用可以传递任意个数参数
- 例如 let result = add(1,2,3);
它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而数据 3 没有变量接收。

在这里插入图片描述

3.5. 常用对象

1. Array对象

JavaScript Array对象用于定义数组

定义格式

在这里插入图片描述

元素访问
- 格式: arr[索引] = 值;
代码演示

在这里插入图片描述

特点
- JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。
代码演示

在这里插入图片描述

属性
- 常用对象属性

在这里插入图片描述

1, length属性

该属性可以动态的获取数组的长度。有了这个length属性，我们就可以遍历数组了

2, for循环遍历数组

在这里插入图片描述

方法
- 常用方法

在这里插入图片描述

1, push 函数

作用: 给数组添加元素，也就是在数组的末尾添加元素

参数表示要添加的元素

在这里插入图片描述

2, splice 函数

作用: 删除元素

参数1：索引。表示从哪个索引位置删除
参数2：个数。表示删除几个元素

在这里插入图片描述

2. String对象

定义格式

在这里插入图片描述

属性
- String对象提供了很多属性 (这里只举例最常用的)
- 属性 length ，该属性是用于动态的获取字符串的长度
函数
- String对象提供了很多函数（方法） (这里只举例最常用的)
- charAt() ，返回在指定位置的字符
- indexOf() ，检索字符串
- trim() ，去掉字符串两端的空格
代码演示

在这里插入图片描述

应用场景

在这里插入图片描述

3. 自定义对象

定义格式

在这里插入图片描述

1, 调用属性的格式
对象名.属性名

2, 调用函数的格式
对象名.函数名()

代码演示

在这里插入图片描述

4. BOM对象

介绍
- BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。
组成
- Window：浏览器窗口对象
- Navigator：浏览器对象
- Screen：屏幕对象
- History：历史记录对象
- Location：地址栏对象
BOM 中的各个对象和浏览器的各个组成部分的对应关系图

在这里插入图片描述

Window对象
- window 对象是 JavaScript 对浏览器的窗口进行封装的对象。
- 获取window对象
- 该对象不需要创建直接使用 window，其中 window. 可以省略。

两种调用方式

在这里插入图片描述

window对象属性
- window 对象提供了用于获取其他 BOM 组成对象的属性
- 如果想使用 Location 对象的话，就可以使用 window 对象获取；写成 window.location，而 window. 可以省略，简化写成 location 来获取 Location 对象。

在这里插入图片描述

window对象函数
- 常用的函数
setTimeout(function,毫秒值) : 在一定的时间间隔后执行一个function，只执行一次
setInterval(function,毫秒值) :在一定的时间间隔后执行一个function，循环执行

在这里插入图片描述

confirm代码演示

在这里插入图片描述

定时器代码演示

在这里插入图片描述

案例演示

需求一，每隔1秒，灯泡切换一次状态

在这里插入图片描述

需求一代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
</head>
<body>

<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
<input type="button" onclick="off()" value="关灯">

<script>
    function on(){
        document.getElementById('myImage').src='../imgs/on.gif';
    }

    function off(){
        document.getElementById('myImage').src='../imgs/off.gif'
    }
    
    //定义一个变量，用来记录灯的状态，偶数是开灯状态，奇数是关灯状态
    var x = 0;
    //使用循环定时器
    setInterval(function (){
        if(x % 2 == 0){//表示是偶数，开灯状态，调用 on() 函数
            on();
        }else {  //表示是奇数，关灯状态，调用 off() 函数
            off();
        }
        x ++;//改变变量的值
    },1000);

</script>
</body>
</html>

需求二，实现点击按钮进行开灯、关灯功能

在这里插入图片描述

需求二代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--方式1：在下面input标签上添加 onclick 属性，并绑定 on() 函数-->
    <input type="button" value="点我" onclick="on()"> <br>
    <input type="button" value="再点我" id="btn">

    <script>
        function on(){
            alert("我被点了");
        }
      	//方式2：获取 id="btn" 元素对象，通过调用 onclick 属性 绑定点击事件
        document.getElementById("btn").onclick = function (){
            alert("我被点了");
        }
    </script>
</body>
</html>

History对象
- History 对象是 JavaScript 对历史记录进行封装的对象。
获取History对象
- 使用 window.history获取，其中window. 可以省略
  window.history.方法();
  history.方法();
History对象函数

当点击向左的箭头，就跳转到前一个访问的页面，这就是 back() 函数的作用；
当我们向右的箭头，就跳转到下一个访问的页面，这就是 forward() 函数的作用。

在这里插入图片描述

Location对象
- Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象，跳转到任意页面。

在这里插入图片描述

获取Location对象
- 使用 window.location获取，其中window. 可以省略
  window.location.方法();
  location.方法();
Location对象属性
- Location对象提供了很多属性。经常用的只有一个属性 href
  href 设置或返回完整的 URL
代码演示

在这里插入图片描述

案例演示
- 需求：3秒跳转到百度首页

在这里插入图片描述

5. DOM对象

介绍
- DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
- XML 文档中的标签需要自己写代码解析，而 HTML 文档是浏览器解析
分类

1, 核心DOM
(通用的标准)
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
左边是 HTML 文档内容，右边是 DOM 树

在这里插入图片描述

2, XML DOM

-针对 XML 文档的标准模型

3, HTML DOM

   -针对 HTML 文档的标准模型

该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象

例如：标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象。

例如：标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是 Element 对象。

作用

JavaScript 通过 DOM，就能够对 HTML进行操作了
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式（CSS）
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素
获取Element对象
- Document 对象中提供了以下获取 Element 元素对象的函数
- getElementById()
  根据id属性值获取，返回单个Element对象
- getElementsByTagName()
  根据标签名称获取，返回Element对象数组
- getElementsByName()
  根据name属性值获取，返回Element对象数组
- getElementsByClassName()
  根据class属性值获取，返回Element对象数组
代码演示

基础代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="light" src="../imgs/off.gif"> <br>

    <div class="cls">代码演示</div>   <br>
    <div class="cls">JavaScript</div> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
    <script>
		//在此处书写js代码
    </script>
</body>
</html>

需求&代码

在这里插入图片描述

HTML Element对象使用

查询文档步骤

HTML 中的 Element 元素对象有很多，以后可以根据具体的需求查阅文档使用。

在这里插入图片描述

代码演示

基础代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="light" src="../imgs/off.gif"> <br>

    <div class="cls">代码演示</div>   <br>
    <div class="cls">JavaScript</div> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
    <script>
		//在此处书写js代码
    </script>
</body>
</html>

需求&代码

在这里插入图片描述

3.6. 事件监听

1. 概念

HTML 事件是发生在 HTML 元素上的“事情”。比如：页面上的按钮被点击、鼠标移动到元素之上、按下键盘按键等都是事件。
事件监听是JavaScript 可以在事件被侦测到时==执行一段逻辑代码。例如点击按钮实现替换图片，校验用户输入的内容并给出提示信息

2. 事件绑定

方式一

通过 HTML标签中的事件属性进行绑定

在这里插入图片描述

方式二

通过 DOM 元素属性绑定

在这里插入图片描述

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--方式1：在下面input标签上添加 onclick 属性，并绑定 on() 函数-->
    <input type="button" value="点我" onclick="on()"> <br>
    <input type="button" value="再点我" id="btn">

    <script>
        function on(){
            alert("被点击了");
        }
      	//方式2：获取 id="btn" 元素对象，通过调用 onclick 属性 绑定点击事件
        document.getElementById("btn").onclick = function (){
            alert("被点击了");
        }
    </script>
</body>
</html>

3. 常见事件

常用的事件属性列举

在这里插入图片描述

onfocus 获得焦点事件

在这里插入图片描述

onblur 失去焦点事件

在这里插入图片描述

onmouseout 鼠标移出事件
onmouseover 鼠标移入事件

在这里插入图片描述

onsubmit 表单提交事件
- 带有表单的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="register" action="#" >
        <input type="text" name="username" />
        <input type="submit" value="提交">
    </form>
    <script>
        
    </script>
</body>
</html>

代码实现

在这里插入图片描述

3.7. 表单验证案例

1. 案例需求

登录页面

在这里插入图片描述

案例需求

在这里插入图片描述

2. 代码演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body {
            background-image: url("../file/bg.jpg");
            background-size: cover;
            font-family: "微软雅黑", sans-serif;
        }
        .login {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -150px 0 0 -150px;
            width:300px;
            height:300px;
        }
        .login h1 {
            color:#555555;
            text-shadow: 0px 10px 10px #CDC673;
            letter-spacing:2px;text-align:center;
            margin-bottom:20px;
        }
        input{
            padding:10px;
            width:100%;
            color:white;
            margin-bottom:10px;
            background-color:#555555;
            border: 1px solid black;
            border-radius:5px;
            letter-spacing:2px;
        }
        form button{
            width:100%;
            padding:10px;
            margin-bottom:10px;
            background-color:#CDC673;
            border:1px solid black;
            border-radius:5px;
            cursor:pointer;
        }
    </style>
</head>
<body class="login">
<h1>Login</h1>
<form action="" method="post" id="loginForm">
    <input id="username" type="text" name="username" placeholder="请求输入用户名">
    <span id="usernameMsg" style="color: red;display: none">用户名不符合规则</span>
    <input id="password" type="password" name="password" placeholder="请输入密码">
    <span id="passwordMsg" style="color: red;display: none">密码不符合规则</span>
    <button type="submit" id="login">登录</button>
    <button type="submit">注册</button>
</form>

<script>
    //在此处编写js代码实现功能
    //获取用户名的输入框

    //获取用户名输入框，并绑定失去焦点事件
    let usernameObj = document.getElementById("username");
    usernameObj.onblur = checkUserName;

    //获取密码输入框，并绑定失去焦点事件
    let passwordObj = document.getElementById("password");
    passwordObj.onblur = checkPassword;

    function checkUserName() {
        //定义正则表达式规则
        let usernameReg = /^\w{6,12}$/;
        //获取用户输入的用户名
        let username = usernameObj.value.trim();
        //校验用户名是否符合正则规则
        let flag = usernameReg.test(username);
        //判断是否符合规则，如果不符合给出提示
        if(!flag) {
            document.getElementById("usernameMsg").style.display = "block";
        } else {
            document.getElementById("usernameMsg").style.display = "none";
        }

        return flag;
    }

    function checkPassword() {
        //定义正则表达式规则
        let passwordReg = /^\d{6,12}$/;
        //获取用户输入的密码
        let password = passwordObj.value.trim();
        //校验密码是否符合正则规则
        let flag = passwordReg.test(password);
        //判断是否符合规则，如果不符合给出提示
        if(!flag) {
            document.getElementById("passwordMsg").style.display = "block";
        } else {
            document.getElementById("passwordMsg").style.display = "none";
        }

        return flag;
    }

    //给表单绑定表单提交事件
    document.getElementById("loginForm").onsubmit = function() {
        return checkUserName() && checkPassword();
    }

</script>
</body>
</html>

3.8. RegExp(正则表达式)

1.概述

RegExp 是正则对象。正则对象是判断指定字符串是否符合规则。在 js 中对正则表达式封装的对象就是正则对象。

2. 创建对象

直接创建方式：注意不要加引号
var reg = /正则表达式/;
创建 RegExp 对象
var reg = new RegExp(“正则表达式”);

3. 函数

test(str) ：判断指定字符串是否符合规则，返回 true或 false

4. 正则表达式

定义

•正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符合指定的规则，如果符合返回true，如果不符合返回false。
常用规则

在这里插入图片描述

代码演示

// 规则：单词字符，6~12
//1,创建正则对象，对正则表达式进行封装
var reg = /^\w{6,12}$/;

var str = "abcccc";
//2,判断 str 字符串是否符合 reg 封装的正则表达式的规则
var flag = reg.test(str);
alert(flag);