HTML、JavaScript和CSS实现注册页面设计
目录
一、实现要求
二、实现页面图
1、注册页面
2.用户ID、用户名、口令验证成功后显示页面
三、用户ID、用户名、口令、确定口令验证逻辑js代码
1、验证用户ID
2、验证用户名
3、验证口令密码
四、总结
五、代码仓库
一、实现要求
综合使用HTML、JavaScript和CSS进行注册页面设计,实现以下若干功能:
1.注意整个页面的色调和美观
2.使用Frameset+Table布局(div也可)
3.对用户ID和用户名、口令不符合条件及时判断
4.对口令不一致进行 及时判断(34的及时判断,要求提示信息必须显示在同一个页面,也就是说显示在当前的行的后面或者上面或者下面)
5.判断Email地址是否合法
6.在“提交”后能在新页面显示所有的输入信息
二、实现页面图
1、注册页面

2.用户ID、用户名、口令验证成功后显示页面

三、用户ID、用户名、口令、确定口令验证逻辑js代码
1、验证用户ID
用户ID使用正则表达式
var reg_userid = /^\w{6,8}$/; // 正则表达式匹配6到8位的字母数字字符或下划线
function checkUserID() {var userID = document.getElementById("userid").value;var reg_userid = /^\w{6,8}$/; // 正则表达式匹配6到8位的字母数字字符或下划线var flag = reg_userid.test(userID);console.log(flag);var s_userid = document.getElementById("s_userid");if (flag) {s_userid.innerHTML = "<img width='35' height='25' src='./gou.png'/>";s_userid.className = 'valid'; // 可选:改变类名以更改样式} else {s_userid.innerHTML = "用户ID格式有误";s_userid.className = 'error'; // 可选:保持错误提示的样式类名}return flag;}
2、验证用户名
用户名对应正则表达式
var reg_username = /^\w{6,12}$/; // 正则表达式匹配6到12位的字母数字字符或下划线
function checkUsername() {var username = document.getElementById("username").value;var reg_username = /^\w{6,12}$/;var flag = reg_username.test(username);var s_username = document.getElementById("s_username");if (flag) {s_username.innerHTML = "<img width='35' height='25' src='./gou.png'/>";}else {s_username.innerHTML = "用户名格式有误";} return flag;}
3、验证口令密码
在验证口令密码区域,将确认口令进行验证,当password和repassword内容不一致时,则进行错误提示。校验通过时,则显示校验成功的图片。
// 验证口令密码function checkPassword() {var password = document.getElementById("password").value;var repassword = document.getElementById("repassword").value;var userid = document.getElementById("userid").value;var reg_password = /^\S{6,8}$/; // 正则表达式匹配6到8位的非空白字符var flag = reg_password.test(password);var s_password = document.getElementById("s_password");var s_repassword = document.getElementById("s_repassword");// 清除之前的错误信息s_password.innerHTML = '';s_repassword.innerHTML = '';if (!flag) {s_password.innerHTML = "口令格式有误(6-8位,不能包含空格)";return false;} else if (password !== repassword) {s_repassword.innerHTML = "两次输入的口令不一致";return false;} else if (password === userid) {s_password.innerHTML = "口令不能与用户ID相同";return false;}// 如果没有错误,则显示正确提示s_password.innerHTML = "<img width='35' height='25' src='./gou.png'/>";s_repassword.innerHTML = "<img width='35' height='25' src='./gou.png'/>";return true;}
4、window.onload 页面加载完成之后执行
三个对应的校验内容在window.onload 页面加载完成之后执行。
window.onload = function () {// window.onload 页面加载完成之后执行 document.getElementById("form").onsubmit = function () {return checkUsername() && checkPassword();};// 对用户ID和用户名、口令不符合条件及时判断document.getElementById("userid").onblur = checkUserID;document.getElementById("username").onblur = checkUsername;// 在输入框失去焦点时触发验证document.getElementById("password").onblur = checkPassword;document.getElementById("repassword").onblur = checkPassword;};
四、总结
javaScript、css、Html是前端的基础以及重要的前置知识,需要融汇贯通的熟练掌握,一些平常的小页面,有助于更好的学习以及掌握底层前端逻辑知识,我是谈谈叭~,一个正在学习前端的大学畜,希望大家指正!一起交流学习~
五、代码仓库
registerPage: 使用HTML、JavaScript和CSS进行注册页面设计
相关文章:
HTML、JavaScript和CSS实现注册页面设计
目录 一、实现要求 二、实现页面图 1、注册页面 2.用户ID、用户名、口令验证成功后显示页面 三、用户ID、用户名、口令、确定口令验证逻辑js代码 1、验证用户ID 2、验证用户名 3、验证口令密码 四、总结 五、代码仓库 一、实现要求 综合使用HTML、JavaScript和CSS进…...
Counter对象的使用样例
1. Counter类的定义和功能说明 Counter是一个用于跟踪值出现次数的有序集合。它可以接收一个可迭代对象作为参数,并生成一个字典,其中包含每个元素作为键,其计数作为值。 2. 统计列表或字符串中元素的出现次数 示例代码: from…...
大模型中的token是什么;常见大语言模型的 token 情况
目录 大模型中的token是什么 常见大语言模型的 token 情况 大模型中的token是什么 定义 在大模型中,token 是文本处理的基本单位。它可以是一个字、一个词,或者是其他被模型定义的语言单元。简单来说,模型在理解和生成文本时,不是以完整的句子或段落为单位进行一次性处理…...
Python小白学习教程从入门到入坑------第十七课 内置函数拆包(语法基础)
一、内置函数 1.1 查看所有内置函数 内置函数:Python 提供了许多内置函数,这些函数无需导入任何模块即可直接使用。它们涵盖了各种用途,从数学运算到类型检查,再到输入输出操作等。 如何查看内置函数呢? 在Pycharm…...
动态规划 —— 路径问题-最小路径和
1. 最小路径和 题目链接: 64. 最小路径和 - 力扣(LeetCode)https://leetcode.cn/problems/minimum-path-sum/description/ 2. 算法原理 状态表示:以莫一个位置位置为结尾 dp[i,j]表示:到达[i,j…...
《链表篇》---删除链表的倒数第N个节点(中等)
题目传送门 方法一:计算链表长度(迭代) 1.计算链表长度,并且定义哑节点链接链表。 2.从哑节点开始前进length-n次。即为被删除节点的前置节点。 3.进行删除操作。 4.返回哑节点的后置节点 class Solution {public ListNode remo…...
duilib 进阶 之 TileListBox 列表
目录 一、TileListBox 1、样式 1)、整体列表分列设置 2)、列表项样式设置 3)、选中后出现√号,horver时 出现边框色 的实例 2、代码 1)、普通动态添加列表项 2)、列表项样式中有自定义控件时 3)、获得选中项 一、TileListBox Tile [taɪl] ,瓦片 棋子 Ti…...
Web应用安全—信息泄露
从书本和网上了解到Web应用安全的信息泄露的知识,今天跟大家分享点。 robots.txt泄漏敏感信息 漏洞描述:搜索引擎可以通过robots文件可以获知哪些页面可以爬取,哪些页面不可以爬取。Robots协议是网站国际互联网界通行的道德规范,…...
大数据治理:策略、技术与挑战
随着信息技术的飞速发展,大数据已经成为现代企业运营和决策的重要基础。然而,大数据的复杂性、多样性和规模性给数据管理带来了前所未有的挑战。因此,大数据治理应运而生,成为确保数据质量、合规性、安全性和可用性的关键手段。本…...
vscode插件-08 Golang
文章目录 Go安装其他必须软件 Go Go语言环境,只需安装这一个插件。然后通过vscode命令下载安装其他go环境需要的内容。 程序调试,需要创建.vscode文件夹并编写launch.json文件。 安装其他必须软件 ctrlshiftp,调出命令面板,输入…...
数据结构+算法分析与设计[15-18真题版]
2015年考试试题 一、给出数组A[3..8,2..6]0F integer,当它在内存中按行存放和按列存放时,分别写出元素A[i,j]的地址计算公式(设每个元素占两个存储单元)。(10分) 二、已知一棵二叉树的中序序列的结果是BDCEAFHG,后序序列的结果是DECBHGFA,试画出这棵二叉树。(10分…...
单链表OJ题(2):反转链表(三指针法)、找中间节点(快慢指针)
目录 1.反转链表 反转链表总结: 2.链表的中间节点(快慢指针法) 快慢指针法总结 1.反转链表 在这道题中,我们需要把一个单链表反转它们的指向,这里,我们给出了一个好理解的简单解法,就是用三…...
Rows 行
Goto Data Grid 数据网格 Rows 行...
十个常见的软件测试面试题,拿走不谢
所有面试问题一般建议先总后分的方式来回答,这样可以让面试官感觉逻辑性很强。 1. 自我介绍 之所以让我们自我介绍,其实是面试官想找一些时间来看简历,所以自我介绍不用太长的时间,1-2分 钟即可。 自我介绍一般按以下方式进行介…...
windows 11 配置 kafka 使用SASL SCRAM-SHA-256 认证
1. 下载安装apache-zookeeper-3.9.2 配置 \conf\zoo.cfg # The number of milliseconds of each tick tickTime2000 # The number of ticks that the initial # synchronization phase can take initLimit10 # The number of ticks that can pass between # sending a requ…...
Elasticsearch —— ES 环境搭建、概念、基本操作、文档操作、SpringBoot继承ES
文章中会用到的文件,如果官网下不了可以在这下 链接: https://pan.baidu.com/s/1SeRdqLo0E0CmaVJdoZs_nQ?pwdxr76 提取码: xr76 一、 ES 环境搭建 注:环境搭建过程中的命令窗口不能关闭,关闭了服务就会关闭(除了修改设置后重启的…...
ElSelect 组件的 onChange 和 onInput 事件的区别
偶然遇到一个问题,在 ElSelect 组件中设置 filterable 属性后,监测不到复制粘贴的内容,也就意味着不能调用接口,下拉框内容为空。 简要代码如下: <ElSelectstyle"width: 256px"multiplev-model{siteIdL…...
加密与数据提取:保护隐私的新途径
加密与数据提取:保护隐私的新途径 在数字化时代,数据已成为驱动社会进步和经济发展的关键要素。然而,随着数据量的爆炸性增长,个人隐私保护成为了一个亟待解决的问题。如何在利用数据价值的同时,确保个人隐私不被侵犯…...
博客摘录「 宋宝华:Linux文件读写(BIO)波澜壮阔的一生」2024年11月1日
同时内核会给第2页标识一个PageReadahead标记,意思就是如果app接着读第2页,就可以预判app在做顺序读,这样我们在app读第2页的时候,内核可以进一步异步预读。 每个bio对应的硬盘里面一块连续的位置,每一块硬盘里面连续…...
使用华为云数字人可以做什么
在数字化和智能化快速发展的今天,企业面临着如何提升客户体验、优化运营效率的挑战。华为云数字人作为一种创新的智能交互解决方案,为企业提供了全新的可能性,助力企业在各个领域实现智能化升级。 提升客户服务体验 华为云数字人能够模拟真…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解(完整版) 一、现代浏览器渲染流程(详细说明) 1. 构建DOM树 浏览器接收到HTML文档后,会逐步解析并构建DOM(Document Object Model)树。具体过程如下: (…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索(基于物理空间 广播范围)2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统:Ubuntu 24.04 LTS (WSL2)架构:x86_64 (GNU/Linux)Rust 版本:rustc 1.87.0 (2025-05-09)Cargo 版本:cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
C++.OpenGL (20/64)混合(Blending)
混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说,在叠衣服的过程中,我会带着团队对比各种模型、方法、策略,毕竟针对各个场景始终寻找更优的解决方案,是我个人和我司「七月在线」的职责之一 且个人认为,…...
二维FDTD算法仿真
二维FDTD算法仿真,并带完全匹配层,输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...
2025.6.9总结(利与弊)
凡事都有两面性。在大厂上班也不例外。今天找开发定位问题,从一个接口人不断溯源到另一个 接口人。有时候,不知道是谁的责任填。将工作内容分的很细,每个人负责其中的一小块。我清楚的意识到,自己就是个可以随时替换的螺丝钉&…...
触发DMA传输错误中断问题排查
在STM32项目中,集成BLE模块后触发DMA传输错误中断(DMA2_Stream1_IRQHandler进入错误流程),但单独运行BLE模块时正常,表明问题可能源于原有线程与BLE模块的交互冲突。以下是逐步排查与解决方案: 一、问题根源…...
