5、JavaScript

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

<script>
    window.alert("hello js!");
</script>

</body>
</html>

效果如下：

2.2、外部脚本

第一步：在外部定义js文件

第二步：在页面引入外部的js文件

在html页面使用<script>标签的src属性导入外部js文件的URL路径

效果如下：

注意：

外部脚本不能包含<script>标签

在js文件中直接书写js代码即可，不要在js文件中书写<script>标签

在页面中引入外部js文件时，不能写成<script src="../js.demo.js" />

3、JavaScript基础语法

3.1、书写语法

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

每行结尾的分号可有可无（js特点）

但是如果一行书写多个语句时，必须加上分号来区分多个语句

注释

单行注释 //注释内容

多行注释 /*注释内容*/

注意：JavaScript没有文档注释

大括号表示代码块

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

3.2、输出语句

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

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

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

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

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

<script>
    window.alert("hello js");  // 写入警告框
</script>

效果如下：

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

<script>
    //window.alert("hello js");  // 写入警告框
    document.write("hello js");  // 写入html页面
</script>

效果如下：

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

<script>
    //window.alert("hello js");  // 写入警告框
    //document.write("hello js");  // 写入html页面
    console.log("hello js");  // 写入控制台
</script>

效果如下：

3.3、变量

JavaScript中用关键字var来声明变量。

格式: var 变量名 = 数据值

js中变量名命令规则如下，基本与Java相同：

组成字符可以为字母、数字、下划线(_)和美元符号($)

不能以数字开头

建议使用驼峰命名

注意：

JavaScript是一门弱类型语言，变量可以存放不同类型的值

在定义变量时赋值为数值数据，还可以将其变量值改为字符串类型

<script>
    var test = 10;
    test = "hello";
    
</script>

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

作用域：全局变量

<script>
    {
        var test = 10;
    }
    alert(test);  // 在代码块中定义的变量，在代码块外部依然可以使用
    
</script>

变量可以重复定义

<script>
    {
        var test = 10;
        var test = 20;  // 在js中，会用20代替掉原来的10
    }
    alert(test);  // 输出结果为20

</script>

针对以上问题，在ECMAScript 6 中新增了关键字let来定义变量，它的用法与var相似，但是作用域是局部有效，且不允许重复声明

<script>
    {
        var test = 10;
        var test = 20;  // 在js中，会用20代替掉原来的10
    }
    alert(test);  // 输出结果为20

</script>

在ECMAScript 6 中新增了关键字const，用与声明一个只读常量，一旦声明，就不能改变了

3.4、数据类型

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

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

arlet（typeof age）：以弹框的形式将age变量的数据类型输出

原始数据类型

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

string 字符、字符串（单双引号皆可）

boolean 布尔（true false）

null 对象为空

undefined 声明后的变量未赋予初值默认就为undefined

<script>
    var age = 20;
    var price = 20.0;
    alert(typeof age);  // 结果为 number
    alert(typeof price); // 结果为 number
    var ch = 'a';
    var str = '张三';
    var strs = "libai";
    alert(typeof ch);  // 结果为 string
    alert(typeof str);  // 结果为 string
    alert(typeof strs);  // 结果为 string
    var obj = null;
    alert(typeof obj);  // 结果为 object
    var s;
    alert(typeof s);  // 结果为 undefined
    
</script>

可能你会很疑惑为什么obj变量打印结果为object，下面是官方文档的截图

3.5、运算符

JavaScript提供了如下运算符，大部分都是与java一样的，不同的是js的关系运算符 == 和 ===

一元运算符 ++， --

算术运算符 +，-，*，/。%

赋值运算符 =， +=，-=，......

关系运算符 >，<，>=，<=，!=，==，===

逻辑运算符 &&，||，!

三元运算符条件表达式? true_value:false_value

3.5.1、== 和 === 的区别

1、判断类型是否一样，如果不一样，则进行类型转换

2、再去比较器值

===（全相等）

1、判断类型是否一样，如果不一样，直接返回false

2、再去比较器值

代码如下

<script>
    var age = 20;
    var age2 = '20';
    alert(age == age2);  // true
    alert(age === age2);  // false
</script>

3.5.2、类型转换

上述中，==运算符会进行类型转换，所以接下来讲解一下JavaScript中的类型转换。

其他类型转换为number

string转换为number：按照字符串的字面值换为数字。如果字面值不是数字，则转为NaN

将string转为number的两种方式

1）使用 + 正号运算符

var str = +"20";
alert(srt + 1);  // 21

2）使用 pareseInt()函数

 var str = "20";
    alert(parseInt(str) + 1);// 21

建议使用parseInt()函数进行转换

boolean转换为number

true转为1，false转为0

 var flag = +false;
    alert(flag);  // 0

其他类型转换为boolean

number类型转为boolean：0和NaN转为false，其他数字转为true

string类型转为boolean：空字符串转为false，其他字符串转为true

undefined类型转为boolean：false

3.6、流程控制语句

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

switch

for （for循环中小括号中定义的变量建议使用关键字let）

while

do while

3.6.1、if语句

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

3.6.2、switch语句

var num = 3;
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;
}

3.6.3、for循环语句

var sum = 0;
for (let i = 1; i <= 100; i++) { //建议for循环小括号中定义的变量使用let
    sum += i;
}
alert(sum);

3.6.4、while循环语句

var sum = 0;
var i = 1;
while (i <= 100) {
    sum += i;
    i++;
}
alert(sum);

3.6.5、do while循环语句

3.7、函数

函数（就是java中的方法）是被设计为执行特定任务的代码块，JavaScript函数通过function关键字来定义

3.7.1、定义格式

函数的定义格式有两种

方式一

function 函数名(参数1,参数2...){
    要执行的代码块
}

方式二

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

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

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

上述函数的参数a，b不需要定义数据类型，因为在JavaScript中使用var来声明变量，加与不加都没有太大意义

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

3.7.2、函数调用

函数的调用

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

eg:

let result = add(1, 2);

注意：

js中，函数调用可以传递任意个参数

例如：let result = add(1,2,3,4,5);

它是将数据1传递给变量a，数据2传递给b，而后面的参数都没有意义

4、JavaScript常用对象

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

以下截取与 http://www.w3school.com.cn

基本对象

BOM对象

DOM对象 DOM中对象比较多，下图只是一部分

接下来说一下两个常用的Array数组对象和String字符串对象

4.1、Array对象

JavaScript Array对象用于定义数组

4.1.1、格式定义

数组定义的格式有两种：

方式1

var 变量名 = new array(元素列表);

例如

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

java语句声明静态数组 int[] arr = new int[]{1,2,3};

方式2

var 变量名 = [元素列表];

例如

var 变量名 = [1,2,3]; //1,2,3 是存储在数组中的数据（元素）

注意：Java中的数组静态初始化使用的是{}，而JavaScript中使用的是[]

4.1.2、元素访问

访问数组中的元素与java语言是一样的，格式如下

arr[索引] = 值;

如下所示

 // 方式一
var arr = new Array(1,2,3);
// alert(arr);

// 方式二
var arr2 = [1,2,3];
//alert(arr2);

// 访问
arr2[0] = 10;
alert(arr2)

4.1.3、特点

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

如下所示

<script>
    // 变长
    var arr = [1,2,3];
    arr[10] = 10;
    alert(arr[10]);  // 10
    alert(arr[9]);  // undefined
    // 在JavaScript中没有赋值的话默认就是undefined
    // 可添加任意类型数据
    arr[5]="hello";
    alert(arr[5]);
</script>

4.1.4、属性

Array对象提供了很多属性，如下图是官方文档截取的

下面演示以下length属性


<script>

    var arr2 = [1, 2, 3, 4, 5];
    for (let i = 0; i < arr2.length; i++) {
        alert(arr2[i]);
    }
</script>

4.1.5、方法

Array对象也提供了很多方法，如下图是官方文档截取的

下面演示push函数和splice函数

push函数：给数组添加元素，也就是在数组的末尾添加元素

splice函数：删除元素

参数1：索引。表示从哪个索引位置开始删除

参数2：格数。表示删除几个元素

<script>
    var arr2 = [1, 2, 3, 4, 5];
    arr2.push(6);  // 向数组中添加元素
    alert(arr2);  // {1,2,3,4,5,6}

    arr2.splice(2,3);  // 从索引2开始，删除数组中的三个元素
    alert(arr2);  // {1,2,6}
</script>

4.2、String对象

String对象的创建方式有两种

方式1

var 变量名 = new String(str);

eg：

var str = new String("hello js~~");
alert(str);

方式2

var 变量名 = "str";

eg：



var str = "hello js~~~";
alert(str);

4.2.1、属性

String对象提供了很多属性，下面是官方截取的

下面举例length来演示，该属性是用于动态的获取字符串的长度

<script>

    var str = "hello";
    alert(str.length);  // 5
</script>

4.2.2、方法

String对象也提供了很多方法，如下图是官方文档截取的

String对象还有一个trim()函数，官方文档没有列出，但是所有的浏览器都支持。

<script>

    var str = "  hello    ";
    alert(str.trim());   // 去除字符串两端的空格  输出结果为 hello
</script>

4.3、自定义对象

在JavaScript中自定义对象很简单，如下是自定义对象的格式

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

};

调用格式

对象名.属性名

对象名.函数名()

下面来演示以下自定义对象

<script>
    var brand = {
        brandName: "华为",
        brandPrice: 9999,
        play: function () {
            alert("干翻华为");
        }
    };

    alert(brand.brandName);  // 华为
    alert(brand.brandPrice);  // 9999
    brand.play();  // 干翻华为

</script>

5、BOM

BOM:Browser Object Model 浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装为对象。

我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。比如：我现在想将浏览器地址栏的地址改为 https://www.itheima.com 就可以通过使用 BOM 中定义的 Location 对象的 href 属性，代码： location.href = "https://itheima.com";

BOM中包含了如下对象：

Window：浏览器窗口对象

Navigator：浏览器对象

Screen：屏幕对象

History：历史记录对象

Location：地址栏对象

下面是BOM中的各个对象和浏览器的各个组成部分的对应关系

5.1、window对象

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

5.1.1、获取window对象

该对象不需要创建可直接使用window，其中 window. 可以省略。比如上面所出现过的alert()函数,在调用时可以写成如下两种

显式使用window对象调用

window.alert("abc");

隐式使用

alert("abc");

5.1.2、window对象属性

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

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

5.1.3、window对象函数

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

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

setInterval(function,毫秒值)：在一定的时间间隔后执行一个function。循环执行

confirm代码演示：

<script>
    // confirm(),点击确认按钮返回 true，点击取消按钮返回 false
    var flag = window.confirm("确认删除");
    alert(flag);  // 返回true或false
</script>

定时器代码演示

当打开浏览器时，每隔三秒钟弹出一个hello js

<script>
    setInterval(function(){
        alert("hello js");
    }, 3000); // 每三秒钟弹出一个警告框（显示了hello js）
</script>

当打开浏览器时，3秒后会弹出一个 hello js，只弹出一次

<script>
    setTimeout(function () {
        alert("hello js");
    }, 3000); // 打开浏览器后三秒钟弹出一个警告框（显示了hello js）
</script>

5.1.4、案例

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

代码如下

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

    <style>
        #myImage {
            text-align: center; /* 居中显示 */
        }
    </style>
</head>
<body>

<input type="button" onclick="on()" value="开灯"/>
<img id="myImage"src="../imgs/off.gif">
<input type="button" onclick="off()" value="关灯">

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

    function off() {
        window.document.getElementById("myImage").src = "../imgs/off.gif";
    }

    var x = 0;  // 计时器
    setInterval(function () {
        if (x % 2 == 0) {
            // 开灯
            on();
        } else {  // x%2==1
            // 关灯
            off();
        }
        x++;
    },1000);

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

5.2、History对象

History对象是javaScript对历史记录封装的对象

History对象的获取

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

History对象的函数

这两个函数实现了我们访问浏览器时使用的前进或者后退，如图所示

当我们点击向左箭头时，就跳转到上一个访问的页面，这就是back()函数的作用

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

5.3、Loacation对象

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

5.3.1、获取Location对象

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

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

5.3.2、Location对象属性

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

代码如下：

<script>
    window.alert("我要跳转到百度了噢~~~");
    window.location.href = "http://www.baidu.com";
</script>

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

5.3.3、案例

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

分析：

3秒跳转，由此可以确定需要使用到定时器，而只跳转一次，所以使用 setTimeOut()
要进行页面跳转，所以需要用到 location 对象的 href 属性实现

代码如下：

<script>
    document.write("三秒后跳转到百度首页");
    window.setTimeout(function () {
        window.location.href = "http://www.baidu.com";
    }, 3000);
</script>

6、DOM

6.1、概述

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

DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

Document：整个文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

如下图，左边是HTML文档内容，右边是DOM树

作用：

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

改变HTML元素的内容

改变HTML元素的样式（CSS）

对HTML DOM事件做出反应

添加和删除HTML元素

DOM相关概念：

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

1、核心DOM：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准

Document：整个文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

2、XML DOM：针对 XML 文档的标准模型

3、HTML DOM：针对 HTML 文档的标准模型

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

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

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

6.2、获取Element对象

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

Document对象中提供了以下获取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">李白</div>
<br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>

<script>
    var img = document.getElementById("light");
    alert(img);
</script>

</body>
</html>

1、根据 id 属性值获取上面的 img 元素对象，返回单个对象

2、根据标签名称获取所有的 div 元素对象

<script>
    var divs = document.getElementsByTagName("div");
    for (let i = 0; i < divs.length; i++) {
        alert(div[i]);
    }
</script>

3、获取所有的满足 name = 'hobby' 条件的元素对象


<script>
    var hobbys = document.getElementByName("hobby");
    for (let i = 0; i < hobbys.length; i++) {
        alert(hobbys[i]);
    }
</script>

4、获取所有的满足 class='cls' 条件的元素对象

<script>
    var classs = document.getElementByClassName("cls");
    for (let i = 0; i < classs.length; i++) {
        alert(classs[i]);
    }
</script>

6.3、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">李白</div>
<br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>

<script>
    // 在此处写js代码
</script>

</body>
</html>

点亮灯泡

此案例由于需要改变 img 标签的图片，所以我们查询文档，下图是查看文档的流程：

代码实现：

//1，根据 id='light' 获取 img 元素对象
var img = document.getElementById("light");
//2，修改 img 对象的 src 属性来改变图片
img.src = "../imgs/on.gif";

2、将所有的 div 标签的标签体内容替换为 呵呵

//1，获取所有的 div 元素对象
var divs = document.getElementsByTagName("div");
/*
        style:设置元素css样式
        innerHTML：设置元素内容
    */
//2，遍历数组，获取到每一个 div 元素对象，并修改元素内容
for (let i = 0; i < divs.length; i++) {
    //divs[i].style.color = 'red';
    divs[i].innerHTML = "呵呵";
}

3、使所有的复选框呈现被选中的状态

此案例我们需要看复选框元素对象有什么属性或者函数是来操作复选框的选中状态。下图是文档的查看

<script>
    // 使所以复选框呈现被选中的状态码
    //1，获取所有的 复选框 元素对象
    var hobbys = document.getElementsByName("hobby");
    //2，遍历数组，通过将 复选框 元素对象的 checked 属性值设置为 true 来改变复选框的选中状态
    for(let i=0;i<hobbys.length;i++){
        hobbys[i].checked = true;
    }

</script>

7、事件监听

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

HTML 事件是发生在 HTML 元素上的“事情”。比如：页面上的

按钮被点击、

鼠标移动到元素之上

按下键盘按键 等都是事件。

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

再比如下图输入框，当我们输入了用户名光标离开输入框，就需要通过 js 代码对输入的内容进行校验，没通过校验就在输入框后提示 用户名格式有误!

7.1、事件绑定

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

方式一：通过 HTML标签中的事件属性进行绑定

方式二：通过DOM元素属性绑定

注意：

推荐使用第二种方式，因为第一种方式将html与JavaScript耦合在了一起

方式一：通过 HTML标签中的事件属性进行绑定

如下面代码，有一个按钮元素，我们是在该标签上定义事件属性，在事件属性中绑定函数。 onclick就是单击事件的事件属性。οnclick=’on()‘示该点击事件绑定了一个名为on()的函数

<input type="button" onclick='on()’>

下面是点击事件绑定的on()函数

function on(){
    alert("我被点了");
}

方式二：通过DOM元素属性绑定

如下面代码是按钮标签，在该标签上我们并没有使用事件属性，绑定事件的操作需要在 js 代码中实现

<input type="button" id="btn">

下面 js 代码是获取了id=’btn‘的元素对象，然后将onclick()作为该对象的属性，并且绑定匿名函数。该函数是在事件触发后自动执行

document.getElementById("btn").onclick = function (){
    alert("我被点了");
}

代码演示：

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

<input type="button" onclick="on()" value="点我">
<script>
    function on(){
        alert("我被点了~~~");
    }
</script>
</body>
</html>

效果如下

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

<input type="button" id="btn" value="快点我">

<script>
    document.getElementById("btn").onclick = function(){
        alert("我被点啦~~~");
    }
</script>
</body>
</html>

7.2、常见事件

上面案例中使用到了 onclick 事件属性，那都有哪些事件属性供我们使用呢？下面就给大家列举一些比较常用的事件属性

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

onfocus 获得焦点事件

如下图，当点击了输入框后，输入框就获得了焦点。而下图示例是当获取焦点后会更改输入框的背景颜色。

onbulr失去焦点事件

如下图，当点击了输入框后，输入框就获得了焦点；再点击页面其他位置，那输入框就失去焦点了。下图示例是将输入的文本转换为大写。

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>

如上代码的表单，当我们点击 提交 按钮后，表单就会提交，此处默认使用的是 GET 提交方式，会将提交的数据拼接到 URL 后。现需要通过 js 代码实现阻止表单提交的功能，js 代码实现如下： 1、获取form表单元素对象

2、给form表单元素对象绑定onsubmit事件，并绑定匿名函数

3、该匿名函数如果返回的是true，提交表单；如果返回的是false，阻止表单提交

document.getElementById("register").onsubmit = function (){
    //onsubmit 返回true，则表单会被提交，返回false，则表单不提交
    return true;
}

8、表达验证案例

8.1 需求

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

完成以下需求：

当输入框失去焦点时，验证输入内容是否符合规则

当点击注册按钮是，判断所以输入框都是否符合要求，如果不符合则阻止表单提交

8.2 环境准备

下面是初始页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>
    <div class="form-div">
        <div class="reg-content">
            <h1>欢迎注册</h1>
            <span>已有帐号？</span> <a href="#">登录</a>
        </div>
        <form id="reg-form" action="#" method="get">
            <table>
                <tr>
                    <td>用户名</td>
                    <td class="inputs">
                        <input name="username" type="text" id="username">
                        <br>
                        <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                    </td>
                </tr>

                <tr>
                    <td>密码</td>
                    <td class="inputs">
                        <input name="password" type="password" id="password">
                        <br>
                        <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                    </td>
                </tr>

                <tr>
                    <td>手机号</td>
                    <td class="inputs"><input name="tel" type="text" id="tel">
                        <br>
                        <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                    </td>
                </tr>
            </table>
            <div class="buttons">
                <input value="注 册" type="submit" id="reg_btn">
            </div>
            <br class="clear">
        </form>

    </div>


    <script>

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

css

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.reg-content{
    padding: 30px;
    margin: 3px;
}
a, img {
    border: 0;
}

body {
    background-image: url("../imgs/reg_bg_min.jpg") ;
    text-align: center;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td, th {
    padding: 0;
    height: 90px;

}
.inputs{
    vertical-align: top;
}

.clear {
    clear: both;
}

.clear:before, .clear:after {
    content: "";
    display: table;
}

.clear:after {
    clear: both;
}

.form-div {
    background-color: rgba(255, 255, 255, 0.27);
    border-radius: 10px;
    border: 1px solid #aaa;
    width: 424px;
    margin-top: 150px;
    margin-left:1050px;
    padding: 30px 0 20px 0px;
    font-size: 16px;
    box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);
    text-align: left;
}

.form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] {
    width: 268px;
    margin: 10px;
    line-height: 20px;
    font-size: 16px;
}

.form-div input[type="checkbox"] {
    margin: 20px 0 20px 10px;
}

.form-div input[type="button"], .form-div input[type="submit"] {
    margin: 10px 20px 0 0;
}

.form-div table {
    margin: 0 auto;
    text-align: right;
    color: rgba(64, 64, 64, 1.00);
}

.form-div table img {
    vertical-align: middle;
    margin: 0 0 5px 0;
}

.footer {
    color: rgba(64, 64, 64, 1.00);
    font-size: 12px;
    margin-top: 30px;
}

.form-div .buttons {
    float: right;
}

input[type="text"], input[type="password"], input[type="email"] {
    border-radius: 8px;
    box-shadow: inset 0 2px 5px #eee;
    padding: 10px;
    border: 1px solid #D4D4D4;
    color: #333333;
    margin-top: 5px;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
    border: 1px solid #50afeb;
    outline: none;
}

input[type="button"], input[type="submit"] {
    padding: 7px 15px;
    background-color: #3c6db0;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    min-width: 80px;
    border: none;
    color: #FFF;
    box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
}

input[type="button"]:hover, input[type="submit"]:hover {
    background-color: #5a88c8;
}

input[type="button"]:active, input[type="submit"]:active {
    background-color: #5a88c8;
}
.err_msg{
    color: red;
    padding-right: 170px;
}
#password_err,#tel_err{
    padding-right: 195px;
}

#reg_btn{
    margin-right:50px; width: 285px; height: 45px; margin-top:20px;
}

8.3 验证输入框

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

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

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

代码如下

//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");

//1.2 绑定onblur事件 失去焦点
usernameInput.onblur = function () {
    //1.3 获取用户输入的用户名
    var username = usernameInput.value.trim();

    //1.4 判断用户名是否符合规则：长度 6~12
    if (username.length >= 6 && username.length <= 12) {
        //符合规则
        document.getElementById("username_err").style.display = 'none';
    } else {
        //不合符规则
        document.getElementById("username_err").style.display = '';
    }
}

//1. 验证密码是否符合规则
//1.1 获取密码的输入框
var passwordInput = document.getElementById("password");

//1.2 绑定onblur事件 失去焦点
passwordInput.onblur = function() {
    //1.3 获取用户输入的密码
    var password = passwordInput.value.trim();

    //1.4 判断密码是否符合规则：长度 6~12
    if (password.length >= 6 && password.length <= 12) {
        //符合规则
        document.getElementById("password_err").style.display = 'none';
    } else {
        //不合符规则
        document.getElementById("password_err").style.display = '';
    }
}

//1. 验证手机号是否符合规则
//1.1 获取手机号的输入框
var telInput = document.getElementById("tel");

//1.2 绑定onblur事件 失去焦点
telInput.onblur = function() {
    //1.3 获取用户输入的手机号
    var tel = telInput.value.trim();

    //1.4 判断手机号是否符合规则：长度 11
    if (tel.length == 11) {
        //符合规则
        document.getElementById("tel_err").style.display = 'none';
    } else {
        //不合符规则
        document.getElementById("tel_err").style.display = '';
    }
}

8.4、验证表单

当用户点击 注册 按钮时，需要同时对输入的 用户名、密码、手机号 ，如果都符合规则，则提交表单；如果有一个不符合规则，则不允许提交表单。实现该功能需要获取表单元素对象，并绑定onsubmit事件

//1. 获取表单对象
var regForm = document.getElementById("reg-form");

//2. 绑定onsubmit 事件
regForm.onsubmit = function () {
    
}

onsubmit事件绑定的函数需要对输入的 用户名、密码、手机号 进行校验，这些校验我们之前都已经实现过了，这里我们还需要再校验一次吗？不需要，只需要对之前校验的代码进行改造，把每个校验的代码专门抽象到有名字的函数中，方便调用；并且每个函数都要返回结果来去决定是提交表单还是阻止表单提交，代码如下：

//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");

//1.2 绑定onblur事件 失去焦点
usernameInput.onblur = checkUsername;

function checkUsername() {
    //1.3 获取用户输入的用户名
    var username = usernameInput.value.trim();

    //1.4 判断用户名是否符合规则：长度 6~12
    var 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;
}

//1. 验证密码是否符合规则
//1.1 获取密码的输入框
var passwordInput = document.getElementById("password");

//1.2 绑定onblur事件 失去焦点
passwordInput.onblur = checkPassword;

function checkPassword() {
    //1.3 获取用户输入的密码
    var password = passwordInput.value.trim();

    //1.4 判断密码是否符合规则：长度 6~12
    var 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;
}

//1. 验证手机号是否符合规则
//1.1 获取手机号的输入框
var telInput = document.getElementById("tel");

//1.2 绑定onblur事件 失去焦点
telInput.onblur = checkTel;

function checkTel() {
    //1.3 获取用户输入的手机号
    var tel = telInput.value.trim();

    //1.4 判断手机号是否符合规则：长度 11
    var flag = tel.length == 11;
    if (flag) {
        //符合规则
        document.getElementById("tel_err").style.display = 'none';
    } else {
        //不合符规则
        document.getElementById("tel_err").style.display = '';
    }
    return flag;
}

而onsubmit绑定的函数需要调用checkUsename()函数、checkPassword()函数、checkTel()函数

//1. 获取表单对象
var regForm = document.getElementById("reg-form");

//2. 绑定onsubmit 事件
regForm.onsubmit = function () {
    //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false

    var flag = checkUsername() && checkPassword() && checkTel();

    return flag;
}

9、RegExp对象

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

9.1、正则对象使用

9.1.1、创建对象

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

直接量方式：注意不要加引号

var reg = /正则表达式/;

创建RegExp对象

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

9.1.2、函数

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

9.2、正则表达式

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

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

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

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

^：表示开始

$：表示结束

[ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符

.：代表任意单个字符，除了换行和行结束符

\w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]

\d：代表数字字符：相当于 [0-9]

量词：

+：至少一个

*：零个或多个

？：零个或一个

{x}：x个

{m,}：至少m个

{m,n}：至少m个，最多n个

9.3、改进表单校验案例

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>


<script>

    //1. 验证用户名是否符合规则
    //1.1 获取用户名的输入框
    var usernameInput = document.getElementById("username");

    //1.2 绑定onblur事件 失去焦点
    usernameInput.onblur = checkUsername;

    function checkUsername() {
        //1.3 获取用户输入的用户名
        var username = usernameInput.value.trim();

        //1.4 判断用户名是否符合规则：长度 6~12,单词字符组成
        var reg = /^\w{6,12}$/;
        var flag = reg.test(username);

        //var 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;
    }

    //1. 验证密码是否符合规则
    //1.1 获取密码的输入框
    var passwordInput = document.getElementById("password");

    //1.2 绑定onblur事件 失去焦点
    passwordInput.onblur = checkPassword;

    function checkPassword() {
        //1.3 获取用户输入的密码
        var password = passwordInput.value.trim();

        //1.4 判断密码是否符合规则：长度 6~12
        var reg = /^\w{6,12}$/;
        var flag = reg.test(password);

        //var 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;
    }

    //1. 验证手机号是否符合规则
    //1.1 获取手机号的输入框
    var telInput = document.getElementById("tel");

    //1.2 绑定onblur事件 失去焦点
    telInput.onblur = checkTel;

    function checkTel() {
        //1.3 获取用户输入的手机号
        var tel = telInput.value.trim();

        //1.4 判断手机号是否符合规则：长度 11，数字组成，第一位是1
        //var flag = tel.length == 11;
        var reg = /^[1]\d{10}$/;
        var flag = reg.test(tel);
        if (flag) {
            //符合规则
            document.getElementById("tel_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("tel_err").style.display = '';
        
        return flag;
    }

    //1. 获取表单对象
    var regForm = document.getElementById("reg-form");

    //2. 绑定onsubmit 事件
    regForm.onsubmit = function () {
        //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false

        var flag = checkUsername() && checkPassword() && checkTel();

        return flag;
    }
</script>
</body>
</html>