【JavaScript】案例1：使用JS完成注册页面校验
🔎这里是【JavaScript】，关注我学习前端不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【JavaScript】 目前主要更新JavaScript，一起学习一起进步。
👀本期介绍
本期主要介绍案例1：使用JS完成注册页面校验
文章目录
1. 需求说明
用户在提交注册表单时，需要对用户的填写的数据进行校验。
本案例只对用户名、密码、确认密码进行校验。
其中用户名、密码、确认密码不能为空；
密码和确认密码必须保持一致
2. 知识讲解-JavaScript（一）
2.1 JavaScript 概述
2.1.1 JavaScript 是什么？有什么作用？
JavaScript
常用来为网页添加各式各样的动态功能。例如：点击隐藏、点击显示。
HTML
：就是用来写网页的。
人的身体
CSS
： 就是用来美化页面的。 人的衣服
JavaScript：前端大脑、灵魂。 人的大脑、灵魂
JavaScript
是
WEB
上强大的
脚本语言
。
脚本语言：
无法独立执行。必须嵌入到其他语言中，结合使用。
直接被浏览器解析执行。
Java
编程语言：
独立写程序，独立运行。 编译
---
执行
作用：控制页面特效展示。
例如：
JS
可以对
HTML
元素进行动态控制
JS
可以对表单项进行校验
JS
可以控制
CSS
的样式
2.1.2 JavaScript 入门案例
2.1.3 JavaScript 的语言特征及编程注意事项
特征：
JavaScript
无需编译，直接被浏览器解释并执行
JavaScript
无法单独运行，必须嵌入到
HTML
代码中运行
JavaScript
的执行过程由上到下依次执行
注意：
JavaScript
没有访问系统文件的权限（安全）
由于 JavaScript
无需编译，是由上到下依次解释执行，所以在保证可读性的情况下，允许使用链
式编程
JavaScript
和
java
没有任何直接关系
2.1.4 JavaScript 的组成
ECMAScript (核心)：规定了 JS 的语法和基本对象。
DOM
文档对象模型：
处理网页内容
的方法和接口
标记型文档。
HTML
BOM
浏览器对象模型：
与浏览器交互
的方法和接口
2.1.4 JavaScript 的引入方式
2.1.4.1
内部脚本
在当前页面内部写
script
标签，
script
内部即可书写
JavaScript
代码
格式：
<script type=”text/javascript”>
JavaScript
的代码
</script>
示例：
注：script 标签理论上可以书写在 HTML 文件的任意位置
2.1.4.2 外部引入
在
HTML
文档中，通过
<script src=””>
标签引入
.js
文件
格式：
<script type=”text/javascript”
src
=”javascript
文件路径
” ></script>
示例
1
：
注：外部引用时
script
标签内不能有
script
代码，即使写了也不会执行。
示例
2
：
2.2 JavaScript 基本语法
2.2.1 注释
单行注释
//
Hbuilder
快捷键
ctrl+/
多行注释
/* */
Hbuilder
快捷键
ctrl+shift+/
示例：
2.2.2 变量
2.2.2.
1
变量简述
变量：标示内存中的一块空间，用于存储数据，且数据是可变的。
变量的声明：
var
变量名
;
//
变量赋予默认值，默认值为
undefined
（未定义的）
变量的声明和赋值：
var
变量名
=
值
;
//
变量赋予对应的值
在声明
JavaScript
变量时，需要遵循以下命名规范：
必须以字母或下划线开头，中间可以是数字、字符或下划线
变量名不能包含空格等符号
不能使用
JavaScript
关键字作为变量名，如：
function
、
this
、
class
JavaScript
严格区分大小写
。
2.2.2.2 基本数据类型
类似于 java 中的基本数据类型。
JavaScript
区别于
java
，是弱类型语言，变量的使用不用严格遵循规范，所以一个变量声明好之
后，是可以
赋予任意类型的值。
这在强类型语言 Java 中是无法想象的
通过 typeof 运算符可以分辨变量值属于哪种基本数据类型
ECMAScript 实现之初的一个 bug，null 属于基本数据类型，typeof(null)--object
2.2.2.3 引用数据类型
引用类型通常叫做类（
class
），但在
JavaScript
中，因为不存在编译过程，所以没有类的概念。
所以
JavaScript
的引用数据类型都是
对象
。
JavaScript
对象类型的默认值是
null.
标准创建方式：
var str = new String();//
和
java
相同
var str = new String; //js 独有的方式
2.2.3 运算符
2.2.3.1
比较运算符
==
逻辑等。仅仅对比 数据值。
===
全等
。 对比数据值并且对比类型。
如果值和类型都相同，则为
true
；值和类型有一个不同，则为
false
2.2.3.2 常见的 JS 运算符附录
注：
JavaScript
逻辑运算符没有
& |
2.2.3.3 参考附录-if 条件中的特殊格式（扩展-了解）
JavaScript
中的
if
和
Java
中的
if
用法一样，都有表达式。
遇到特殊情况，请查阅下面两个表格即可。（无需记忆）
2.3 JavaScript 函数/方法
2.3.1 函数简述及作用
如果一段代码需要被重复编写使用，那么我们为了方便统一编写使用，可以将其封装进一个函数
（方法）中。作用：增强代码的复用性
2.3.2 函数格式
JavaScript
函数定义必须用小写的
function
；
JavaScript
函数无需定义返回值类型，直接在
function
后面书写 方法名；
参数的定义无需使用
var
关键字，否则报错；
JavaScript
函数体中，
return
可以不写，也可以
return
具体值，或者仅仅写
return
；
JavaScript
函数调用执行完毕必定有返回值，值及类型根据
return
决定：
如果未
return
具体值，返回值为
undefined
；
2.3.3 函数使用的注意事项（和 Java 不同）
JavaScript
函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定
义；
因为
JavaScript
不存在函数重载，所以
JavaScript
仅根据方法名来调用函数，即使实参与函数的
形参不匹配，也不会影响正常调用；
如果形参未赋值，就使用默认值 undefined
2.4 正则对象
2.4.1 RegExp 对象的创建方式
var reg = new RegExp("
表达式
");
（开发中基本不用）
var reg = /^
表达式
$/;
直接量（开发中常用）
直接量中存在边界，即
^
代表开始，
$
代表结束
直接量方式的正则是对象，不是字符串，别用引号
2.4.2 test 方法
RegExp
方法
随堂练习
2.4.3 常用正则（附录）
2.5 JS 事件
2.5.1 JS 事件是什么？有什么作用？
通常鼠标或热键的动作我们称之为事件
(Event)
事件包括：点击、表单提交、值发生改变、鼠标移入、鼠标移出等等
通过
JS
事件，我们可以完成页面的指定特效。
2.5.2 onclick
点击事件：由鼠标或热键点击元素组件时触发
示例：
效果：
2.5.3 onsubmit
表单提交事件：
表单的提交按钮被点击时
触发
注意：该事件需要返回
boolean
类型的值来执行 提交
/
阻止 表单数据的操作。
事件得到
true
，提交表单数据
事件得到
false
，阻止表单数据提交
示例
1
：
效果 1：
示例 2：
效果 2：
3. 需求分析
提示：
1
、通过
document.getElementById()
获取要操作的元素
2
、元素
.value
获取元素的值
4. 案例代码实现
浙公网安备 33010602011771号