JavaWeb---JavaScript

我只想卷死各位，或者被各位卷死，在此特别感谢黑马程序员的JavaWeb教程

黑马程序员JavaWeb基础教程，Java web从入门到企业实战完整版

533.2万 13.4万

JavaScript简介

JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。

JavaScript 是用来控制网页行为的，它能使网页可交互；

JavaScript（简称：JS）在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。ECMA 规定了一套标准就叫 ECMAScript ，所有的客户端校验语言必须遵守这个标准，当然 JavaScript 也遵守了这个标准。

JavaScript引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：

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

内部脚本

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间

代码如下：

alert(数据) 是 JavaScript 的一个方法，作用是将参数数据以浏览器弹框的形式输出出来。

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

<script>
    alert("Hello JavaScript")
</script>
</body>
</html>

在 HTML 文档中可以在任意地方，可以放置任意数量的<script>标签。
不过一般把脚本放置在<body>元素的底部，可以改善显示速度
因为浏览器在加载页面的时候会从上往下进行加载并解析。我们应该先让用户看到页面内容，然后再展示动态的效果。

外部脚本

定义外部 js 文件。如定义名为 demo.js的文件
demo.js内容如下

1	alert("hello js");

在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。

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

<script src="../js/demo.js"></script>
</body>
</html>

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

JavaScript基础语法

书写语法

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无（建议还是加上）

如果一行上写多个语句时，必须加分号用来区分多个语句。
注释
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */

注意：JavaScript 没有文档注释

大括号表示代码块

1
2
3

if (count == 3) { 
   alert(count); 
}

输出语句

js 可以通过以下方式进行内容的输出，只不过不同的语句输出到的位置不同

使用 window.alert() 写入警告框

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

<script>
    window.alert("HELLO JS")
</script>
</body>
</html>

使用 document.write() 写入 HTML 输出

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

<script>
    document.write("HELLO JS")
</script>
</body>
</html>

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

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

<script>
    console.log("HELLO JS")
</script>
</body>
</html>

变量

JavaScript中使用var关键字（variable的缩写）来声明变量，格式var 变量名 = 数据值;。
JavaScript是一门弱类型语言，变量可以存放不同类型的值

js 中的变量名命名也有如下规则，和java语言基本都相同

组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
数字不能开头
建议使用驼峰命名

JavaScript 中 var 关键字有点特殊，有以下地方和其他语言不一样

作用域：全局变量

{
    var age = 18;
}
window.alert(age); //在代码块中定义age，在代码块外依然能使用

变量可以重复定义

{
    var age = 18;
    var age = 14; //JavaScript会用14替换之前的18
}
window.alert(age); //最后输出的是14

针对如上的问题，ECMAScript 6 新增了 let关键字来定义变量。它的用法类似于 var，但是let声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。

{
    let age = 18;
}
window.alert(age);  //试图在代码块外部输出age

浏览器不会弹窗输出结果，F12打开控制台会出现Uncaught ReferenceError: age is not defined错误，age未定义。

ECMAScript 6 新增了 const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

{
    const PI = 3.14159;
    PI = 3.14;  //IDEA会直接报错
}

数据类型

JavaScript 中提供了两类数据类型：原始类型和引用类型。

使用 typeof 运算符可以获取数据类型

例如alert(typeof age); 以弹框的形式将 age 变量的数据类型输出

原始数据类型：

number：数字（整数，小数，NaN(Not a Number)）

var age = 3.14;
var price = 521;
window.alert(typeof age);   //结果为number
window.alert(typeof price); //结果为number

注意： NaN是一个特殊的number类型的值，后面用到再说

string：字符、字符串，单引号和双引号都行

var ch = 'X';
var name = 'Tom'; 
var addr = "US";

alert(typeof ch);   //结果是  string
alert(typeof name); //结果是  string
alert(typeof addr); //结果是  string

注意：==在 js 中双引号和单引号都表示字符串类型的数据

boolean：布尔。true，false

var flag1 = true;
var flag2 = false;

alert(typeof flag1);  //结果是 boolean
alert(typeof flag2); //结果是 boolean

null：对象为空
1
2
3
var obj = null;

alert(typeof obj); //结果是 object
为什么结果是object，官方给出了这个解释

注释:您也许会问，为什么typeof 运算符对于null值会返回“Object”。这实际上是JavaScript最初实现中的一个错误，然后被ECMAScript沿用了。现在，null被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。
undefined：当声明的变量未初始化时，该变量的默认值是 undefined
1
2
var a ;
alert(typeof a); //结果是 undefined

运算符

JavaScript 提供了如下的运算符。大部分和 Java语言都是一样的，不同的是 JS 关系运算符中的 == 和 ===，一会我们只演示这两个的区别，其他运算符将不做演示

一元运算符：++，—
算术运算符：+，-，*，/，%
赋值运算符：=，+=，-=…
关系运算符：>，<，>=，<=，!=，==，===…
逻辑运算符：&&，||，!
三元运算符：条件表达式 ? true_value : false_value

==和===区别

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

验证

var tmp1 = 18;
var tmp2 = "18";
window.alert(tmp1 == tmp2);     //ture
window.alert(tmp1 === tmp2);    //false

类型转换

上述讲解 == 运算符时，发现会进行类型转换，这里就来详细说说JavaScript中的类型转换

其他类型转为number
- string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN
  将 string 转换为 number 有两种方式：
  - 使用 + 正号运算符：
    1
    2
    let tmp1 = "18";
    window.alert(+tmp1 + 1); //19
  - 使用 parseInt() 函数：
    1
    2
    let tmp1 = "18";
    window.alert(parseInt(tmp1) + 1); //19
    建议使用 parseInt() 函数进行转换。
- boolean 转换为 number 类型：true 转为1，false转为0
  1
  2
  var flag = +false;
  alert(flag); // 0
其他类型转为boolean
- number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
- string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
- null类型转换为 boolean 类型是 false
- undefined 转换为 boolean 类型是 false

使用场景：

在 Java 中使用字符串前，一般都会先判断字符串不是null，并且不是空字符才会做其他的一些操作，JavaScript也有类型的操作，代码如下：

var str = "abc";

//健壮性判断
if(str != null && str.length > 0){
    alert("转为true");
}else {
    alert("转为false");
}

但是由于 JavaScript 会自动进行类型转换，所以上述的判断可以进行简化，代码如下：

var str = "abc";

//健壮性判断
if(str){
    alert("转为true");
}else {
    alert("转为false");
}

流程控制语句

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

if
switch
for
while
dowhile

if 语句

let num = 1;
if(num = 1){
    alert(num)
}

switch 语句

let num = 8;
switch (num) {
    case 1:
        alert("星期一")
        break;
    case 2:
        alert("星期二")
        break;
    case 3:
        alert("星期三")
        break;
    case 4:
        alert("星期四")
        break;
    case 5:
        alert("星期无")
        break;
    case 6:
        alert("星期六")
        break;
    case 7:
        alert("星期日")
        break;
    default:
        alert("输入有误")
        break;
}

for 语句

var num = 1;
for (let i = 0; i < 10; i++) {
    document.write(num++ + " ");
}

while 语句

let num = 1;
while (num < 10){
    document.write(num++ + " ");
}

dowhile 语句

let num = 1;
do {
    document.write(num++ + " ");
} while (num < 20);

函数

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

定义格式

函数定义格式有两种：

方式一：

1
2
3

function 函数名(参数列表){
    要执行的代码
}

方式二：

1
2
3

var 函数名 = function(参数列表){
    要执行的代码
}

注意：形式参数不需要类型。因为JavaScript是弱类型语言

1
2
3

function add(a, b){
    return a + b;
}

上述函数的参数 a 和 b 不需要定义数据类型，因为在每个参数前加上 var 也没有任何意义。

返回值也不需要定义类型，可以在函数内部直接使用return返回即可

函数调用

函数调用函数：

1	函数名称(实际参数列表);

举例

function add(a, b) {
    return a + b;
}

let res = add(3.14, 10);
alert(res);

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

JavaScript常用对象

JavaScript 提供了很多对象供使用者来使用。这些对象总共分类三类

基本对象
BOM对象
DOM对象

这部分我们先学习基本对象，主要学习 Array 数组对象和 String 字符串对象。

Array对象

JavaScript Array对象用于定义数组

定义格式

数组的定义格式有两种：

方式一：

1	var arr = new Array(1,2,3); //1,2,3 是存储在数组中的数据（元素）

方式二：
1
var arr = [1,2,3]; //1,2,3 是存储在数组中的数据（元素）
注意：Java中的数组静态初始化使用的是{}定义，而 JavaScript 中使用的是 [] 定义

元素访问

访问数组中的元素和 Java 语言的一样，格式如下：

1	arr[索引] = 值;

代码演示：

1 2	arr[0] = 10; alert(arr);

特点

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

例如如下代码：

var arr = new Array(1,2,3);
arr[7] = true;
arr[8] = "张三";
arr[10] = 10;
document.write(arr);    //1,2,3,,,,,true,张三,,10

属性

属性	描述
constructor	返回创建 Array 对象原型的函数。
length	设置或返回数组中元素的数量。
prototype	允许您向数组添加属性和方法。

这里只讲解一下 length 属性，该数组可以动态的获取数组的长度。而有这个属性，我们就可以遍历数组了

var arr = new Array(1,2,3);
arr[7] = true;
arr[8] = "张三";
arr[10] = 10;
for (let i = 0; i < arr.length; i++) {
    document.write(arr[i] + ",");
}
//1,2,3,undefined,undefined,undefined,undefined,true,张三,undefined,10,

方法

Array 对象同样也提供了很多方法

方法	描述
concat()	连接两个或多个数组，并返回已连接数组的副本。
copyWithin()	将数组中的数组元素复制到指定位置或从指定位置复制。
entries()	返回键/值对数组迭代对象。
every()	检查数组中的每个元素是否通过测试。
fill()	用静态值填充数组中的元素。
filter()	使用数组中通过测试的每个元素创建新数组。
find()	返回数组中第一个通过测试的元素的值。
findIndex()	返回数组中通过测试的第一个元素的索引。
forEach()	为每个数组元素调用函数。
from()	从对象创建数组。
includes()	检查数组是否包含指定的元素。
indexOf()	在数组中搜索元素并返回其位置。
isArray()	检查对象是否为数组。
join()	将数组的所有元素连接成一个字符串。
keys()	返回 Array Iteration 对象，包含原始数组的键.
lastIndexOf()	在数组中搜索元素，从末尾开始，并返回其位置。
map()	使用为每个数组元素调用函数的结果创建新数组。
pop()	删除数组的最后一个元素，并返回该元素。
push()	将新元素添加到数组的末尾，并返回新的长度。
reduce()	将数组的值减为单个值（从左到右）。
reduceRight()	将数组的值减为单个值（从右到左）。
reverse()	反转数组中元素的顺序。
shift()	删除数组的第一个元素，并返回该元素。
slice()	选择数组的一部分，并返回新数组。
some()	检查数组中的任何元素是否通过测试。
sort()	对数组的元素进行排序。
splice()	从数组中添加/删除元素。
toString()	将数组转换为字符串，并返回结果。
unshift()	将新元素添加到数组的开头，并返回新的长度。
valueOf()	返回数组的原始值。

这里只演示 push 函数和 splice 函数。

push 函数：给数组添加元素，也就是在数组的末尾添加元素
- 参数表示要添加的元素
  1
  2
  3
  var arr = [1,2,3];
  arr.push(4);
  document.write(arr); //1,2,3,4
splice 函数：删除元素
- 参数1：索引。表示从哪个索引位置删除
- 参数2：个数。表示删除几个元素
  1
  2
  3
  4
  var arr = [1,2,3];
  arr.push(4);
  arr.splice(1,2);
  document.write(arr); //1,4

String对象

String对象的创建方式有两种

方式1：
1
var 变量名 = new String(s);
方式二
1
var 变量名 = "数组";
String对象的与Java中String的方法大多数都一致，这里讲一个常用的方法trim()，它是用来去掉字符串两端的空格。
用户在输入用户名和密码时，可能会习惯的输入一些空格，这样在我们后端程序中判断用户名和密码是否正确，结果肯定是失败。所以我们一般都会对用户输入的字符串数据进行去除前后空格的操作。

自定义对象

在 JavaScript 中自定义对象特别简单，下面就是自定义对象的格式：

var 对象名称 = {
    属性名称1:属性值1,
    属性名称2:属性值2,
    ...,
    函数名称:function (形参列表){},
	...
};

调用属性的格式：

对象名.属性名

调用函数的格式：

对象名.函数名()

代码演示：

var person = {
    name:"张三",
    age:18,
    hobby:function (){
        alert("干饭");
    }
};
document.write(person.name);
document.write(person.age);
person.hobby();

BOM

Window对象

window 对象是 JavaScript 对浏览器的窗口进行封装的对象。

获取window对象

该对象不需要创建直接使用 window，其中 window. 可以省略。比如我们之前使用的 alert() 函数，其实就是 window 对象的函数，在调用是可以写成如下两种

显式使用 window 对象调用
1
window.alert("abc");
隐式调用
1
alert("abc");

window对象属性

window 对象提供了用于获取其他 BOM 组成对象的属性

方法	描述
history	对 History 对象的只读引用。请参数。History 对象
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
Navigator	对 Navigator 对象的只读引用。请参数 Navigator 对象。
Screen	对 Screen 对象的只读引用。请参数 Screen 对象。

也就是说，我们想使用 Location 对象的话，就可以使用 window 对象获取；写成 window.location，而 window. 可以省略，简化写成 location 来获取 Location 对象。

window对象方法

window 对象提供了很多函数供我们使用，而很多都不常用；下面给列举了一些比较常用的函数

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

setTimeout(function,毫秒值) : 在一定的时间间隔后执行一个function，只执行一次
setInterval(function,毫秒值) :在一定的时间间隔后执行一个function，循环执行

confirm代码演示：

1 2	var flag = confirm("确认删除？"); alert(flag);

confirm() 函数一般用于防止用户的误操作，当用户想删除一条数据时，需要点击确定，当我们点击 确定 按钮，flag 变量值记录的就是 true ；当我们点击 取消 按钮，flag 变量值记录的就是 false。

定时器代码演示：

1
2
3

setTimeout(function () {
    alert("你好")
},3000);

当我们打开浏览器，3秒后才会弹框输出 你好，并且只会弹出一次。

1
2
3

setInterval(function () {
    alert("你好")
},1000);

当我们打开浏览器，每隔1秒都会弹框输出 你好。

案例

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

代码

<!--将开关灯的按钮打开，把循环定时器的代码注释掉，可以实现手动点击按钮开关灯的效果-->
<!--<input type="button" onclick="on()" value="开灯">-->
<img id="myImage" src="https://s2.loli.net/2022/08/15/ZigwbChy1W9P7qH.gif" alt="">
<!--<input type="button" onclick="off()" value="关灯">-->

<script>
    function on(){
        document.getElementById("myImage").src="https://s2.loli.net/2022/08/15/RmyvTZrGcYEHj1i.gif";
    }
    function off(){
        document.getElementById("myImage").src="https://s2.loli.net/2022/08/15/ZigwbChy1W9P7qH.gif";
    }
    let tmp = 0;
    setInterval(function () {
        if (tmp % 2 == 0) {
            on();
        }else {
            off();
        }
        tmp++;
    }, 1000);
</script>

History对象

History 对象是 JavaScript 对历史记录进行封装的对象。

History 对象的获取

使用 window.history获取，其中window. 可以省略
History 对象的函数

方法	描述
back()	加载history 列表中的前一个URL。
forward()	加载history 列表中的下一个URL。

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

Location对象

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

获取Location对象

使用 window.location获取，其中window. 可以省略

1 2	window.location.方法(); location.方法();

Location对象属性

Location对象提供了很对属性。以后常用的只有一个属性 href

属性	描述
href	设置或返回完整的URL。

代码演示

1 2	alert("要跳转了"); location.href = "https://www.baidu.com";

在浏览器首先会弹框显示 要跳转了，当我们点击了 确定 就会跳转到百度的首页。

案例

需求：3秒跳转到百度首页

分析：
1. 3秒跳转，由此可以确定需要使用到定时器，而只跳转一次，所以使用 setTimeOut()
2. 要进行页面跳转，所以需要用到 location 对象的 href 属性实现
  1
  2
  3
  4
  document.write("三秒后跳转至主页...");
  setTimeout(function (){
  location.href = "https://www.baidu.com";
  },3000);

DOM

概述

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

作用：

JavaScript 通过 DOM，就能够对 HTML进行操作了

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

DOM相关概念：

DOM 是 W3C（万维网联盟）定义了访问 HTML 和 XML 文档的标准。该标准被分为 3 个不同的部分：

核心 DOM：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
XML DOM：针对 XML 文档的标准模型
HTML DOM：针对 HTML 文档的标准模型

该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象
- 例如：<img> 标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象。
- 例如：<input type='button'> 标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是 Element 对象。

获取 Element对象

HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。

Document 对象中提供了以下获取 Element 元素对象的函数

getElementById()：根据id属性值获取，返回单个Element对象
getElementsByTagName()：根据标签名称获取，返回Element对象数组
getElementsByName()：根据name属性值获取，返回Element对象数组
getElementsByClassName()：根据class属性值获取，返回Element对象数组

HTML Element对象使用

HTML 中的 Element 元素对象有很多，不可能全部记住，以后是根据具体的需求查阅文档使用。
例如上面的开关灯泡，就是根据id属性值获取了Image对象，然后修改Image对象的src属性，从而达到切换图片，实现灯泡开关的效果

<input type="button" onclick="on()" value="开灯">
<img id="myImage" src="../imgs/off.gif" alt="">
<input type="button" onclick="off()" value="关灯">  
<script>
    function on() {
        document.getElementById("myImage").src = "../imgs/on.gif";  //获取Image对象，并将src属性修改为关灯图片地址
    }

    function off() {
        document.getElementById("myImage").src = "../imgs/off.gif"; //获取Image对象，并将src属性修改为开灯图片地址
    }
</script>

事件监听

要想知道什么是事件监听，首先先聊聊什么是事件？

HTML 事件是发生在 HTML 元素上的“事情”。比如：页面上的 按钮被点击、鼠标移动到元素之上、按下键盘按键 等都是事件。

事件监听是JavaScript 可以在事件被侦测到时执行一段逻辑代码。之前的开关灯操作，当我们点击 开灯 按钮，就需要通过 js 代码实现替换图片

又例如当我们在注册一些网站时，我们输入用户名之后， 光标离开 输入框，就是通过 js 代码对输入的内容进行校验，没通过校验就在输入框后提示 用户名格式有误!

事件绑定

JavaScript 提供了两种事件绑定方式：

方式一：通过 HTML标签中的事件属性进行绑定
如下面代码，有一个按钮元素，我们是在该标签上定义 事件属性，在事件属性中绑定函数。onclick 就是 单击事件 的事件属性。onclick='on（）' 表示该点击事件绑定了一个名为 on() 的函数
1
<input type="button" onclick='on()’>
下面是点击事件绑定的 on() 函数
1
2
3
function on(){
alert("我被点了");
}
方式二：通过 DOM 元素属性绑定

如下面代码是按钮标签，在该标签上我们并没有使用 事件属性，绑定事件的操作需要在 js 代码中实现
1
<input type="button" id="btn">
下面 js 代码是获取了 id='btn' 的元素对象，然后将 onclick 作为该对象的属性，并且绑定匿名函数。该函数是在事件触发后自动执行
1
2
3
document.getElementById("btn").onclick = function (){
Salert("我被点了");
}

常见事件

事件属性名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

表单验证案例

需求

对表单进行校验，如果输入的用户名、密码、手机号符合规则，则允许提交；如果不符合规则，则不允许提交。

完成以下需求：

当输入框失去焦点时，验证输入内容是否符合要求
当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不合符则阻止表单提交

环境准备

先创建一个表单

<form id="reg_form" action="#" method="post">
    <table>
        <tr>
            <td>用户名</td>
            <td>
                <input type="text" name="username" id="username">
                <br>
                <!--设置display为none会隐藏字段-->
                <span id="username_err" style="display: none">用户名应为6~12位</span>
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td>
                <input type="password" name="password" id="password">
                <br>
                <span id="password_err" style="display: none">密码应为6~12位</span>
            </td>
        </tr>
        <tr>
            <td>手机号</td>
            <td>
                <input type="text" name="phone" id="phone">
                <br>
                <span id="phone_err" style="display: none">手机号应为11位</span>
            </td>
        </tr>
    </table>
    <input type="submit" value="注册">
</form>

验证输入框

校验用户名。当用户名输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使 id='username_err' 的span标签显示出来，给出用户提示。
校验密码。当密码输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使 id='password_err' 的span标签显示出来，给出用户提示。
校验手机号。当手机号输入框失去焦点时，判断输入的内容是否符合 长度是 11 位 规则，不符合使 id='phone_err' 的span标签显示出来，给出用户提示。

代码如下

//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
let usernameInput = document.getElementById("username");
//1.2 绑定onblur事件 失去焦点检查用户名输入
usernameInput.onblur = checkUsername;

function checkUsername() {
    //1.3 获取用户输入的用户名
    let username = usernameInput.value.trim();
    //1.4 判断用户名是否符合规则：长度 6~12
    let flag = username.length >= 6 && username.length <= 12;
    if (flag) {
        //符合条件就把错误信息隐藏
        document.getElementById("username_err").style.display = 'none';
    } else {
        //不符合条件就展示错误信息
        document.getElementById("username_err").style.display = '';
    }
    return flag;
}

//验证密码与手机号也是异曲同工
let passwordInput = document.getElementById("password");
passwordInput.onblur = checkPassword;

function checkPassword() {
    let password = passwordInput.value.trim();
    let flag = password.length >= 6 && password.length <= 12;
    if (flag) {
        document.getElementById("password_err").style.display = 'none';
    } else {
        document.getElementById("password_err").style.display = '';
    }
    return flag;
}

let phoneInput = document.getElementById("phone");
phoneInput.onblur = checkPhone;

function checkPhone() {
    let phone = phoneInput.value.trim();
    let flag = phone.length === 11;
    if (flag) {
        document.getElementById("phone_err").style.display = 'none';
    } else {
        document.getElementById("phone_err").style.display = '';
    }
    return flag;
}


let regForm = document.getElementById("reg_form");
//onsubmit 事件绑定的函数需要对输入的 `用户名`、`密码`、`手机号` 进行校验
regForm.onsubmit = checkAll;

function checkAll() {
    //只有当符合所有检查条件的时候，才返回true，正常提交
    return checkUsername() && checkPassword() && checkPhone();
}

RegExp对象

RegExp 是正则对象。正则对象是判断指定字符串是否符合规则。

我们可以通过爬虫技术去爬取该页面源代码，然后获取页面中所有的邮箱，后期我们可以给这些邮箱地址发送推广的邮件。那么问题来了，如何才能知道页面内容中哪些事邮箱地址呢？这里就可以使用正则表达式来匹配邮箱。

在 js 中对正则表达式封装的对象就是正则对象。

正则对象使用

创建对象

正则对象有两种创建方式：

直接量方式：注意不要加引号
1
var reg = /正则表达式/;

创建 RegExp 对象

1	var reg = new RegExp("正则表达式");

函数

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

正则表达式

从上面创建正则对象的格式中可以看出不管哪种方式都需要正则表达式，那么什么是正则表达式呢？

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

正则表达式是和语言无关的。很多语言都支持正则表达式，Java语言也支持，只不过正则表达式在不同的语言中的使用方式不同，js 中需要使用正则对象来使用正则表达式。

正则表达式常用的规则如下：

^：表示开始
$：表示结束
[ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符
.：代表任意单个字符，除了换行和行结束符
\w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]
\d：代表数字字符：相当于 [0-9]

量词：

+：至少一个
*：零个或多个
？：零个或一个
{x}：x个
{m,}：至少m个
{m,n}：至少m个，最多n个

改进表单校验案例

表单校验案例中的规则是我们进行一系列的判断来实现的，现在学习了正则对象后，就可以使用正则对象来改进这个案例。

function checkUsername() {
    let username = usernameInput.value.trim();
    let reg = /^\w{6,12}$/;     //需要6~12个单词字符
    let flag = reg.test(username);
    if (flag) {
        document.getElementById("username_err").style.display = 'none';
    } else {
        document.getElementById("username_err").style.display = '';
    }
    return flag;
}

function checkPhone() {
    let phone = phoneInput.value.trim();
    let reg = /^[1]\d{10}$/;    //手机号应该是1开头的，一共11位
    let flag = reg.test(phone);
    if (flag) {
        document.getElementById("phone_err").style.display = 'none';
    } else {
        document.getElementById("phone_err").style.display = '';
    }
    return flag;
}

用户名	用户名应为6~12位
密码	密码应为6~12位
手机号	手机号应为11位