Hades

网页三剑客

1.HTML

HTML定义页面的整体结构；

CSS是用来美化页面，让页面看起来更加美观；

JavaScript可以使网页动起来

1.1基础标签

标签描述
<h1>  ~ <h6>定义标题，h1最大，h6最小
<font>定义文本的字体、字体尺寸、字体颜色
<b>定义粗体文本
<i>定义斜体文本
<u>定义文本下划线
<center>定义文本居中
<p>定义段落
<br>定义折行
<hr>定义水平线
HTML 原代码显示结果描述
&lt;<小于号或显示标记
&gt ;>大于号或显示标记
&amp;&可用于显示其它特殊字符
&quot;“引号
&reg;®已注册
&copy;©版权
&trade;™商标
&nbsp;不断行的空白

1.2 多媒体标签

标签描述
<img>定义图片
<audio>定义音频
<video>定义视频

  • img：定义图片

    • src：规定显示图像的 URL
    • height：定义图像的高度
    • width：定义图像的宽度

  • audio：定义音频。支持的音频格式：MP3、WAV、OGG

    • src：规定音频的 URL
    • controls：显示播放控件

  • video：定义视频。支持的音频格式：MP4, WebM、OGG

    • src：规定视频的 URL
    • controls：显示播放控件

    图片，音频，视频标签都有src属性，而src是用来指定对应的媒体资源。资源路径有两种路径。

    • 绝对路径：完整路径

    • 相对路径：相对位置关系

    找页面和其他资源的相对路径。

    ./ 表示当前路径

    ../ 表示上一级路径

    ../../ 表示上两级路径

1.3 超链接标签

标签描述
<a>定义超链接，用于链接到另一个资源
  • href：指定访问资源的URL
  • target：指定打开资源的方式
    • _self:默认值，在当前页面打开
      • _blank：在空白页面打开

1.4 列表标签

标签描述
<ol>定义有序列表
<ul>定义无序列表
<li>定义列表项
  • 有序列表中的 type 属性用来指定标记的标号的类型（数字、字母、罗马数字等）
  • 无序列表中的 type 属性用来指定标记的形状

1.5 表格标签

标签描述
<table>定义表格
<tr>定义行
<td>定义单元格
<th>定义表头单元格

  • table：设置符号的类型

    * table：定义表格
	* width：宽度
	* border：边框
	* cellpadding：定义内容和单元格的距离
	* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
	* bgcolor：背景色
	* align：对齐方式
* tr：定义行
	* bgcolor：背景色
	* align：对齐方式
* td：定义单元格
	* colspan：合并列
	* rowspan：合并行
* th：定义表头单元格
* <caption>：表格标题

​ 表格示例

<table border="1" align="center" cellspacing="0" width="500">
    <tr>
        <!--        colspan 合并2列-->
        <th colspan="2">品牌logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
    </tr>
    <tr align="center">
        <td>010</td>
        <td><img src="img/三只松鼠.png" width="60" height="50"></td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
    </tr>
    <tr align="center">
<!--        rowspan 合并2行-->
        <td rowspan="2">009</td>
        <td><img src="img/优衣库.png" width="60" height="50"></td>
        <td>优衣库</td>
        <td>优衣库</td>
    </tr>
    <tr align="center">
        <td><img src="img/小米.png" width="60" height="50"></td>
        <td>小米</td>
        <td>小米科技有限公司</td>
    </tr>
</table>

1.6 布局标签

标签描述
<div>定义 HTML 文档中的一个区域部分，经常与 CSS 一起使用，用来布局网页
<span>用于组合行内元素。

1.7 表单标签

form标签属性

  • action：规定当提交表单时向何处发送表单数据，该属性值就是URL

    以后会将数据提交到服务端，该属性需要书写服务端的URL。而今天我们可以书写 # ，表示提交到当前页面来看效果。

  • method ：规定用于发送表单数据的方式

    method取值有如下两种：

    • get：默认值。如果不设置method属性则默认就是该值
      • 请求参数会拼接在URL后边
      • url的长度有限制 4KB
    • post：
      • 浏览器会将数据放到http请求消息体中
      • 请求参数无限制的
标签描述
<form>定义表单
<input>定义表单项，通过type属性控制输入形式
<label>为表单项定义标注
<select>定义下拉列表
<option>定义下拉列表的列表项
<textarea>定义文本域

1.7.1 Form Type取值

type 取值描述
text默认值。定义单行的输入字段
password定义密码字段
radio定义单选按钮
checkbox定义复选框
file定义文件上传按钮
hidden定义隐藏的输入字段
submit定义提交按钮，提交按钮会把表单数据发送到服务器
reset定义重置按钮，重置按钮会清除表单中的所有数据
button定义可点击按钮

2. CSS

CSS全称 Cascading Style Sheet（层叠样式表）

2.1 css导入方式

css 导入方式其实就是 css 代码和 html 代码的结合方式。CSS 导入 HTML有三种方式：

  • 内联样式：在标签内部使用style属性，属性值是css属性键值对

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

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

  • 内部样式：定义<style>标签，在标签内部定义css样式

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

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

  • 外部样式：定义link标签，引入外部的css文件

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

    div{
	color: red;
}

    在html中引入 css 文件。

    <link rel="stylesheet"  href="demo.css">

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

    示例代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            color: red;
        }
    </style>
    <link href="../css/demo.css" rel="stylesheet">
</head>
<body>
    <div style="color: red">hello css</div>

    <span>hello css </span>

    <p>hello css</p>
</body>
</html>

2.2 css选择器

css 选择器就是选取需设置样式的元素（标签），比如如下css代码：

div {
	color:red;
}

如上代码中的 div 就是 css 中的选择器。我们只讲下面三种选择器：

  • 元素选择器

    格式：

    元素名称{color: red;}

    例子：

    div {color:red}  /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/

  • id选择器

    格式：

    #id属性值{color: red;}

    例子：

    html代码如下：

    <div id="name">hello css2</div>

    css代码如下：

    #name{color: red;}/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/

  • 类选择器

    格式：

    .class属性值{color: red;}

    例子：

    html代码如下：

    <div class="cls">hello css3</div>

    css代码如下：

    .cls{color: red;} /*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }

        #name{
            color: blue;
        }

        .cls{
            color: pink;
        }
    </style>

</head>
<body>
    <div>div1</div>
    <div id="name">div2</div>
    <div class="cls">div3</div>
    <span class="cls">span</span>
</body>
</html>

2.3 css属性

css属性不作为重点讲解。简单了解即可，更多属性，可查阅W3schoolopen in new window文档。

3. JavaScript

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

JavaScript 是用来控制网页行为的，它能使网页可交互；那么它可以做什么呢？如改变页面内容、修改指定元素的属性值、对表单进行校验等。

3.1 JavaScript引入方式

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

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

内部脚本

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

  • 在 HTML 文档中可以在任意地方，放置任意数量的<script>标签。

  • 一般把脚本置于 <body> 元素的底部，可改善显示速度

    因为浏览器在加载页面的时候会从上往下进行加载并解析。 我们应该让用户看到页面内容，然后再展示动态的效果。

代码如下：

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

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

<script>
    alert("hello js1");
</script>
</body>
</html>

外部脚本

在页面使用 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" />。

3.2 JavaScript基础语法

3.2.1 语法规范

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

  • 每行结尾的分号可有可无

    如果一行上写多个语句时，必须加分号用来区分多个语句。

  • 注释

    • 单行注释：// 注释内容
    • 多行注释：/* 注释内容 */

    注意：JavaScript 没有文档注释

  • 大括号表示代码块

    和 java 一样 大括号表示代码块。

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

3.2.1 输出语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03js输出语句</title>
</head>
<body>
<script>
    window.alert("hello js")//在页面弹出一个警告框
    document.write("js写入到页面")
    console.log("以log方式输入")
</script>
</body>
</html>

3.2.2 定义变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03js变量</title>
</head>
<body>
<script>
    var open = "20";//var 表示全局变量
    open = 10;
    let private = false //let 私有变量
    var open = 123; //js变量var修饰可以重复定义，但是let修复的变量不可以重复定义
    {
        let age = 20;//let不被外部访问
    }
    alert(open)
    let a;//默认undefined
    alert(typeof a)
</script>
</body>
</html>

3.2.3 数据类型

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

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

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

3.2.4 类型转换

JavaScript 中的类型转换。

  • 其他类型转为number

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

      将 string 转换为 number 有两种方式：

      • 使用 + 正号运算符：

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

      • 使用 parseInt() 函数(方法)：

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

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

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

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

  • 其他类型转为boolean

    • number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
    • string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
    • null类型转换为 boolean 类型是 false
    • undefined 转换为 boolean 类型是 false

    代码如下：

    // var flag = 3;
// var flag = "";
var flag = undefined;

if(flag){
    alert("转为true");
}else {
    alert("转为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");
}

3.2.5 流程控制语句

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

  • if
  • switch
  • for
  • while
  • dowhile

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05流程控制语句</title>
</head>
<body>
<script>

    let count = 3;
    //if
    if (count == 3) {
        alert(count)
    }
    //switch
    switch (count) {
        case 3:
            alert('星期三');
            break
        case 4:
            alert('星期四');
            break
        default:
            alert('星期八');
            break
    }
    //for
    document.writeln("for:")
    for (let i = 0; i < count; i++) {
        document.writeln(i)
    }
    //while
    document.writeln("while:")
    while (count){
        document.writeln(count)
        count --
    }

    // 5. do...while,从0累加到100
    var sum = 0;
    var i = 1;
    do {
        sum += i;
        i++;
    }
    while (i <= 100);
    alert(sum);

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

3.2.6 函数

函数调用函数：

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

函数的2种定义方式：

		//方式一
    function add(a,b) {
        return a+b;
    }
    let result = add(1,2);
    alert(result);

    //方式二，此处的function name 无法被调用，只能使用add2调用
    var add2 = function name(a, b) {
        return a+b
    }

==注意：==

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

  • 例如 let result = add(1,2,3);

    它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而数据 3 没有变量接收。

3.2.7 Array对象

JavaScript数组相当于Java中集合。变长变类型

//方式一
let arr = new Array(1,2,3);
//方式二
let arr2 = [1,2,3];
//赋值
arr2[0] = 0;
// 访问,特点：JavaScript数组相当于Java中集合。变长变类型
arr2[10] = 10;
alert(arr2)
//数组元素变类型
arr2[2] = "hello"
alert(arr2)
// push:添加方法，载末尾添加一条数据
 arr2.push(10);
 alert(arr2);
// splice:删除元素，删除0，到1索引的数据，也就是数组中的第一为元素
arr2.splice(0,1);
alert(arr2);
//arr[arr.length] 等同于push
arr2[arr2.length] = "最后一位添加数据";
alert(arr2);

3.2.8 自定义对象

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

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

调用属性的格式：

对象名.属性名

调用函数的格式：

对象名.函数名()

示例代码

let person = {
    name: 'zhangsan',
    age: 20,
    eat: function () {
        alert('干饭')
    }
}
alert(person.name)
person.eat()

3.2.9 RegExp(正则)对象

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

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

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

    var reg = /正则表达式/;

  • 创建 RegExp 对象

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

正则表达式

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

  • ^：表示开始

  • $：表示结束

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

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

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

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

量词：

  • +：至少一个

  • *：零个或多个

  • ？：零个或一个

  • {x}：x个

  • {m,}：至少m个

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

代码演示：

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

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

4. BOM

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

BOM 中包含了如下对象：

  • Window：浏览器窗口对象
  • Navigator：浏览器对象
  • Screen：屏幕对象
  • History：历史记录对象
  • Location：地址栏对象

4.1 Window对象

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

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

confirm代码演示：

// confirm()，点击确定按钮，返回true，点击取消按钮，返回false
var flag = confirm("确认删除？");

alert(flag);

下图是 confirm() 函数的效果。当我们点击 确定 按钮，flag 变量值记录的就是 true ；当我们点击 取消 按钮，flag 变量值记录的就是 false。

定时器代码演示：

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

setTimeout(function (){
    alert("hehe");
},3000);

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

setInterval(function (){
    alert("hehe");
},2000);

案例

需求：每隔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>

4.2 History对象

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

  • History 对象的获取

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

  • History 对象的函数

    back() //加载history的前一个URL

    forward() //加载history的后一个URL

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

4.3 Location对象

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

  • Location 对象的获取

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

  • Location对象属性

    Href() //跳转到某个位置

案例

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

代码实现

document.write("3秒跳转到首页..."); 
setTimeout(function (){
    location.href = "https://www.baidu.com"
},3000);

5.DOM

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

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

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

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

作用：

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

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

5.1 获取Element对象

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

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

  • getElementById()：根据id属性值获取，返回单个Element对象
  • getElementsByTagName()：根据标签名称获取，返回Element对象数组
  • getElementsByName()：根据name属性值获取，返回Element对象数组
  • getElementsByClassName()：根据class属性值获取，返回Element对象数组
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11dom操作</title>
</head>
<body>
<img id="light" src="imgs/off.gif"></br>
<div class="cls">Hello dom</div></br>
<div class="cls">Hello JavaScript</div></br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏</br>
<input type="button" onclick="test()" value="点击一下"></br>
<input type="button" id="btn" value="再点一下"></br>
表单校验
<!--注意，这个表单校验id绑定在form上不是在button-->
<form id="register" action="#" method="get">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>
<script>
  /*
    获取：使用Document对象的方法来获取
        * getElementById：根据id属性值获取，返回一个Element对象
        * getElementsByTagName：根据标签名称获取，返回Element对象数组
        * getElementsByName：根据name属性值获取，返回Element对象数组
        * getElementsByClassName：根据class属性值获取，返回Element对象数组
     */
    //1. getElementById：根据id属性值获取，返回一个Element对象
    var img = document.getElementById("light");
    //2. getElementsByTagName：根据标签名称获取，返回Element对象数组
    var divs = document.getElementsByTagName("div");
    //3. getElementsByName：根据name属性值获取，返回Element对象数组
    var hobbys = document.getElementsByName("hobby");
    //4. getElementsByClassName：根据class属性值获取，返回Element对象数组
    var clss = document.getElementsByClassName("cls");
  
</script>
</body>
</html>

Html Element使用详见说明文档

5.2 事件绑定

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

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

    如下面代码，有一个按钮元素，我们是在该标签上定义 事件属性，在事件属性中绑定函数。onclick 就是 单击事件 的事件属性。onclick='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>
    <!--方式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>
5.2.1 常见事件

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

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

6. 表单验证案例

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

完成以下需求：

  1. 当输入框失去焦点时，验证输入内容是否符合要求

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

详细代码见：12表单校验.html

6.1 验证输入框

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

6.2 验证表单

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

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12表单校验</title>
    <!--    导入外部css-->
    <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 action="#" id="reg-form" method="get">
        <table>
            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input id="username" name="username" type="text">
                    <br>
                    <span class="err_msg" id="username_err" style="display: none">用户名不太受欢迎</span>
                </td>
            </tr>

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

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

        </table>

        <div class="buttons">
            <input id="reg_btn" type="submit" value="注 册">
        </div>
        <br class="clear">
    </form>
</div>
<script>
    let usernameInput = document.getElementById('username');
    //当输入移开时
    usernameInput.onblur = checkInputUser;
        function checkInputUser() {
        //获取输入的用户名
        let username = usernameInput.value.trim();
        /** 使用正则校验
         * ^正则开始
         * &正则结束，
         * \w代表单词字符：字母、数字、下划线(_)，相当于 [A-Za-z0-9_]
         * {m,n}至少m个，最多n个
         * @type {RegExp}
         */
        let reg = /^\w{6,12}$/;
        //test是正则的校验方法
        let flag = reg.test(username);
        if (flag){
            //用户名符合要求，不显示
            document.getElementById('username_err').style.display = 'none';
        }else {
            //不符合规则
            document.getElementById('username_err').style.display = '';
        }
        return flag
    }

    //1. 验证密码是否符合规则
    let passwordInput = document.getElementById("password");

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

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

        //1.4 判断密码是否符合规则：长度 6~12
        let reg = /^\w{6,12}$/;
        let 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. 验证手机号是否符合规则
    let telInput = document.getElementById("tel");
    //1.2 绑定onblur事件 失去焦点
    telInput.onblur = checkTel;
    function checkTel() {
        //1.3 获取用户输入的手机号
        let tel = telInput.value.trim();
        //1.4 判断手机号是否符合规则：长度 11，数字组成，第一位是1
        let reg = /^[1]\d{10}$/;
        let flag = reg.test(tel);
        if (flag) {
            //符合规则
            document.getElementById("tel_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("tel_err").style.display = '';
        }
        return flag;
    }
    //通过标签获取for表单对象
    let regForm = document.getElementsByTagName('form');
    regForm[0].onsubmit = function () {
        //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false
        let flag = checkInputUser() && checkPassword() && checkTel();
        return flag;
    }
</script>
</body>
</html>
Loading...