【JavaScript】案例1:使用JS完成注册页面校验(二)

简介: 本期主要介绍案例1:使用JS完成注册页面校验

2.2.3 运算符


2.2.3.1 比较运算符


image.png

==

逻辑等。仅仅对比 数据值。

===

全等。 对比数据值并且对比类型。

如果值和类型都相同,则为 true;值和类型有一个不同,则为 false

image.png

2.2.3.2 常见的 JS 运算符附录


注:JavaScript 逻辑运算符没有 & |

image.png

image.png

image.png

2.2.3.3 参考附录-if 条件中的特殊格式(扩展-了解)


JavaScript 中的 if Java 中的 if 用法一样,都有表达式。

image.png

遇到特殊情况,请查阅下面两个表格即可。(无需记忆)、

image.png

image.png

2.3 JavaScript 函数/方法


2.3.1 函数简述及作用


如果一段代码需要被重复编写使用,那么我们为了方便统一编写使用,可以将其封装进一个函数(方法)中。作用:增强代码的复用性

2.3.2 函数格式


image.png

JavaScript 函数定义必须用小写的 function ;

JavaScript 函数无需定义返回值类型,直接在 function 后面书写 方法名;

参数的定义无需使用 var 关键字,否则报错;

image.png

JavaScript 函数体中, return 可以不写,也可以 return 具体值,或者仅仅写 return ;

JavaScript 函数调用执行完毕必定有返回值,值及类型根据 return 决定:

如果未 return 具体值,返回值为 undefined ;

image.png

2.3.3 函数使用的注意事项(和 Java 不同)


JavaScript 函数若同名,则不存在方法重载,只有方法相互覆盖,最后定义的函数覆盖之前的定义;

因为 JavaScript 不存在函数重载,所以 JavaScript 仅根据方法名来调用函数,即使实参与函数的形参不匹配,也不会影响正常调用;

image.png

如果形参未赋值,就使用默认值 undefined

image.png

2.4 正则对象


2.4.1 RegExp 对象的创建方式


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

(开发中基本不用)

var reg = /^表达式$/;

直接量(开发中常用)

直接量中存在边界,即^代表开始,$代表结束

直接量方式的正则是对象,不是字符串,别用引号

2.4.2 test 方法


RegExp 方法

image.png

2.4.3 常用正则(附录)


image.png

2.5 JS 事件


2.5.1 JS 事件是什么?有什么作用?


通常鼠标或热键的动作我们称之为事件(Event)

事件包括:点击、表单提交、值发生改变、鼠标移入、鼠标移出等等

通过 JS 事件,我们可以完成页面的指定特效。

2.5.2 onclick


点击事件:由鼠标或热键点击元素组件时触发

示例:

image.png

image.png

2.5.3 onsubmit


表单提交事件:表单的提交按钮被点击时触发

注意:该事件需要返回 boolean 类型的值来执行 提交 / 阻止 表单数据的操作。

事件得到 true ,提交表单数据

事件得到 false ,阻止表单数据提交

示例 1 :

image.png

image.png

示例 2

image.png

image.png

3. 需求分析


image.png

提示:

1、通过 document.getElementById()获取要操作的元素

2、元素.value 获取元素的值

4. 案例代码实现


image.png

相关文章
|
3天前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
13 2
前端JS读取文件内容并展示到页面上
|
2天前
|
JavaScript 前端开发
js_Ipv4以及ipv4段正则校验
几种JavaScript正则表达式,用于校验IPv4地址的有效性,包括支持CIDR表示法的变体。
17 4
|
4天前
|
JavaScript 前端开发
js 回到页面顶部
本文提供了一个JavaScript函数`scrollToTop`,用于平滑滚动页面回到顶部。该函数利用`requestAnimationFrame`和`window.scrollTo`方法逐步减少滚动条距离,直到页面完全回到顶部。
13 1
|
18天前
|
JavaScript 前端开发
js怎么定位不同的页面元素
在JavaScript中,有多种方法定位和选择页面元素。
|
1天前
|
JavaScript 前端开发
js登录注册简单tab切换页面(含前台表单验证)
文章介绍了如何使用HTML、CSS和JavaScript创建一个简单的登录注册页面,并实现Tab切换效果。包括了表单验证,点击登录或注册按钮时,可以切换显示相应的表单。同时提供了完整的前端代码和实现效果图。
|
27天前
|
Java 数据库连接 数据库
从零到精通:揭秘 Hibernate 构建持久层服务的全过程,你离数据持久化大师还有多远?
【8月更文挑战第31天】本文详细介绍了如何从零开始使用 Hibernate 构建一个持久层服务。首先,通过在 Maven 项目中添加必要的依赖,确保项目具备使用 Hibernate 的条件。接着,配置 `hibernate.cfg.xml` 文件以连接 MySQL 数据库,并设置了基本属性。然后定义了一个简单的 `User` 实体类及其映射关系。此外,还创建了一个 `HibernateUtil` 工具类来管理 `SessionFactory`。
28 0
|
29天前
|
缓存 JavaScript 前端开发
Vue.js与JavaScript性能优化终极揭秘:掌握这些技巧,让你的Web应用飞一般地流畅!
【8月更文挑战第30天】随着前端应用复杂度的增加,性能优化变得至关重要。本文深入探讨了如何利用Vue.js和JavaScript实现高效的应用性能。主要内容包括:优化组件设计以减少不必要的渲染,采用异步组件与懒加载技术加速应用启动,利用虚拟滚动和分页处理大数据集,改进Vuex使用方式以及合理运用浏览器缓存等策略。通过具体示例和最佳实践,帮助开发者充分挖掘Vue.js潜力,打造高性能的前端应用。
43 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
73 2