设计一个html+css+js的注册页，对于注册信息进行合法性检测
- 综合使用HTML、JavaScript和CSS进行注册页面设计，实现以下若干功能：
-
- 注意整个页面的色调和美观
- 使用Frameset+Table布局（div也可）
- 对用户ID和用户名、口令不符合条件及时判断
- 对口令不一致进行及时判断（34的及时判断，要求提示信息必须显示在同一个页面，也就是说显示在当前的行的后面或者上面或者下面）
- 判断Email地址是否合法
- 在“提交”后能在新页面显示所有的输入信息
效果展示
以下是代码实现
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>注册页面</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;color: #333;}.container {width: 50%;margin: 0 auto;background: #fff;padding: 20px;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}h2 {text-align: center;color: #4caf50;}.form-group {margin-bottom: 15px;}label {display: block;margin-bottom: 5px;}input[type="text"],input[type="password"],input[type="date"],input[type="email"],input[type="tel"] {width: 100%;padding: 8px;box-sizing: border-box;}.error {color: red;font-size: 0.9em;}button {background-color: #4caf50;color: white;padding: 10px 15px;border: none;border-radius: 5px;cursor: pointer;}button[type="reset"] {background-color: #f44336;}.radio-group {display: flex;gap: 10px;}.radio-group label {display: flex;align-items: center;}.radio-group input[type="radio"] {margin-right: 5px;}</style></head><body><div class="container"><h2>注册页面</h2><form id="registrationForm" onsubmit="return validateForm()"><div class="form-group"><label for="userId">用户ID (6-8位):</label><input type="text" id="userId" name="userId" required /><span class="error" id="userIdError"></span></div><div class="form-group"><label for="username">用户名 (2-10位):</label><input type="text" id="username" name="username" required /><span class="error" id="usernameError"></span></div><div class="form-group"><label for="password">口令 (6-8位，不能与用户ID相同):</label><input type="password" id="password" name="password" required /><span class="error" id="passwordError"></span></div><div class="form-group"><label for="confirmPassword">确认口令:</label><inputtype="password"id="confirmPassword"name="confirmPassword"required/><span class="error" id="confirmPasswordError"></span></div><div class="form-group"><label for="birthday">生日 (格式: yyyy-mm-dd):</label><inputtype="text"id="birthday"name="birthday"placeholder="yyyy-mm-dd"required/><span class="error" id="birthdayError"></span></div><div class="form-group"><label>学历:</label><div class="radio-group"><label><inputtype="radio"name="education"value="专科"required/>专科</label><label><input type="radio" name="education" value="本科" />本科</label><label><inputtype="radio"name="education"value="硕士研究生"/>硕士研究生</label><label><inputtype="radio"name="education"value="博士研究生"/>博士研究生</label><label><input type="radio" name="education" value="其他" />其他</label></div></div><div class="form-group"><label for="region">地区:</label><select id="region" name="region"><option value="华南">华南</option><option value="华东">华东</option><option value="华北">华北</option><option value="西南">西南</option><option value="西北">西北</option></select></div><div class="form-group"><label for="email">E-mail:</label><input type="email" id="email" name="email" required /><span class="error" id="emailError"></span></div><div class="form-group"><label for="address">地址:</label><input type="text" id="address" name="address" required /></div><div class="form-group"><label for="phone">电话 (数字和连字符，例如123456-123):</label><input type="tel" id="phone" name="phone" required /><span class="error" id="phoneError"></span></div><div class="form-group"><label for="remarks">备注:</label><textarea id="remarks" name="remarks" rows="4"></textarea></div><button type="submit">提交</button><button type="reset">重置</button></form></div><script>function validateForm() {let valid = true;// 清除之前的错误信息document.querySelectorAll(".error").forEach((el) => (el.textContent = ""));// 用户ID验证const userId = document.getElementById("userId").value;if (userId.length < 6 || userId.length > 8) {document.getElementById("userIdError").textContent ="用户ID必须为6-8位";valid = false;}// 用户名验证const username = document.getElementById("username").value;if (username.length < 2 || username.length > 10) {document.getElementById("usernameError").textContent ="用户名必须为2-10位";valid = false;}// 口令验证const password = document.getElementById("password").value;if (password.length < 6 || password.length > 8 || password === userId) {document.getElementById("passwordError").textContent ="口令必须为6-8位，且不能与用户ID相同";valid = false;}// 确认口令验证const confirmPassword =document.getElementById("confirmPassword").value;if (confirmPassword !== password) {document.getElementById("confirmPasswordError").textContent ="口令不一致";valid = false;}// 生日格式验证const birthday = document.getElementById("birthday").value;const birthdayPattern = /^\d{4}-\d{2}-\d{2}$/;if (!birthdayPattern.test(birthday)) {document.getElementById("birthdayError").textContent ="生日格式不正确，必须为yyyy-mm-dd";valid = false;}// Email验证const email = document.getElementById("email").value;const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;if (!emailPattern.test(email)) {document.getElementById("emailError").textContent ="请输入有效的Email地址";valid = false;}// 电话验证const phone = document.getElementById("phone").value;const phonePattern = /^\d{6}-\d{3}$/;if (!phonePattern.test(phone)) {document.getElementById("phoneError").textContent = "电话格式不正确";valid = false;}// 如果所有验证通过，显示输入信息if (valid) {const formData = `<h2>注册信息</h2><p>用户ID: ${userId}</p><p>用户名: ${username}</p><p>口令: ${password}</p><p>生日: ${birthday}</p><p>学历: ${document.querySelector('input[name="education"]:checked').value}</p><p>地区: ${document.getElementById("region").value}</p><p>E-mail: ${email}</p><p>地址: ${document.getElementById("address").value}</p><p>电话: ${phone}</p><p>备注: ${document.getElementById("remarks").value}</p>`;const newWindow = window.open("", "_blank");newWindow.document.write(`<html><head><title>注册信息</title><style>body { font-family: Arial, sans-serif; }h2 { color: #4CAF50; }</style></head><body>${formData}</body></html>`);newWindow.document.close(); // 关闭文档流}return false; // 防止表单提交}</script></body>
</html>
相关文章：
设计一个html+css+js的注册页，对于注册信息进行合法性检测
综合使用HTML、JavaScript和CSS进行注册页面设计，实现以下若干功能： 注意整个页面的色调和美观使用FramesetTable布局（div也可）对用户ID和用户名、口令不符合条件及时判断对口令不一致进行及时判断（34的及时判断&#…...
语音识别——使用Vosk进行语音识别
文章目录 前言一、Vosk模型1.准备好所需要的语音包2.下载使用 二、使用示例1.文件读取示例2.结合麦克风演示 总结 前言 如何编译Vosk请参照之前的文章，ubuntu编译kaldi和vosk Vosk是语音识别开源框架，支持二十种语言 - 中文，英语࿰…...
element ui中el-image组件查看图片的坑
比如说上传组件使用el-image-viewer组件去看，如果用错了，你会发现，你每次只能看一张图片 <template><div><el-upload action="#" list-type="picture-card" :auto-upload="false" :file-list="fileList"@change=&qu…...
LabVIEW水质监测系统
在面对全球性的海洋污染问题时，利用先进技术进行水质监测成为了保护海洋环境的关键手段之一。开发了一种基于LabVIEW的海洋浮标水质监测系统，该系统能够实时监测并评估近海水域的水质状况，旨在为海洋保护和污染防治提供科技支持。 项目背景 …...
SpringMVC之 文件上传和下载
1. 文件上传 1.1 前端注意事项 文件上传操作，前端的表单项需要如下三项设置： （1）input标签的type属性应设置为file，并且注意不要在input标签中设置value属性，因为这可能导致文件上传不成功； …...
LeetCode Hot 100：二分查找
LeetCode Hot 100：二分查找 35. 搜索插入位置 思路 1：lower_bound class Solution { public:int searchInsert(vector<int>& nums, int target) {return lower_bound(nums.begin(), nums.end(), target) - nums.begin();} };思路 2…...
打包方式-jar和war的区别
1、jar包 JAR包是类的归档文件，与平台无关的文件格式，其实jar包就是java的类进行编译生成的class文件进行打包的压缩包。 JAR以ZIP文件格式为基础，与ZIP不同的是，JAR不仅用于压缩和发布，还用于部署和封装库、组件和插…...
【论文+源码】基于spring boot的垃圾分类网站
创建一个基于Spring Boot的垃圾分类网站涉及多个步骤，包括环境搭建、项目创建、数据库设计、后端服务开发、前端页面设计等。下面我将引导您完成这个过程。 第一步：准备环境 确保您的开发环境中安装了以下工具： Java JDK 8 或更高版本Mav…...
【C++ STL 模板类】pair 键值对
文章目录 【 1. pair 对象的创建 】【 2. pair 对象的赋值 】【 3. pair 对象的比较 】【 4. pair对象成员的互换】 C STL 标准库提供了 pair 类模板，专门用来将 2 个普通元素 first 和 second（可以是 C 基本数据类型、结构体、类自定的类型）…...
paddleocr使用FastDeploy 部署工具部署 rknn 模型
在 PC 端转换 pdmodel 模型为 rknn 模型和在板端使用百度飞浆开发的 FastDeploy 部署工具部署 rknn 模型 以下内容是在 PC 端系统为 Ubuntu20.04，板端系统为ubuntu20.04 的环境下实现的 描述： 官网地址 rknn_zoo RKNPU2_SDK …...
Apple Vision Pro市场表现分析：IDC最新数据揭示的真相
随着AR/VR技术逐渐成熟并被更多消费者接受，2024年第二季度（Q2）成为这一领域的一个重要转折点。根据国际数据公司（IDC）发布的最新报告，整个AR/VR市场在本季度经历了显著的增长。接下来，我们将深入探讨Apple Vision Pro在这股增长浪潮中的具体表现。 市场背景 2024年Q2，…...
Mybatis-04.入门-JDBC
一.JDBC 二.原始的JDBC程序代码 （不做要求） Test public void testJdbc() throws Exception {//1. 注册驱动Class.forName("com.mysql.cj.jdbc.Driver");//2. 获取连接对象String url "jdbc:mysql://localhost:3306/mybatis";Str…...
拥抱云开发的未来：腾讯云数据库、云模板与AI智能化的应用场景探索
本文目录： 💡前言：技术的边界在不断延展🌟目录🌈什么是腾讯云云开发？💾云数据库：让数据成为开发的稳固基石🥑数据，不再只是数据 🛠云模板…...
新手铲屎官求推荐，噪音低的宠物空气净化器应该用哪款
当初选择养橘猫就是因为我听到有人说橘猫不容易掉毛才养的，谁知道养了之后和传闻中的不一样，真正的让我明白了什么叫“眼见为实”。 主要是猫掉毛就掉毛，只要我能清理的我都会清理，只要能保证养猫的同时还能保持家里卫生干净就行…...
玄机平台-应急响应-webshell查杀
首先xshell连接 然后进入/var/www/html目录中，将文件变成压缩包 cd /var/www/html tar -czvf web.tar.gz ./* 开启一个http.server服务，将文件下载到本地 python3 -m http.server 放在D盾中检测 基本可以确认木马文件就是这四个 /var/www/html/shell.p…...
LeetCode Hot 100：图论
LeetCode Hot 100：图论 200. 岛屿数量 思路 1：深度优先搜索 class Solution { private:const int dx[4] {-1, 0, 1, 0};const int dy[4] {0, 1, 0, -1};public:int numIslands(vector<vector<char>>& grid) {if (grid.empty())retu…...
tracert和ping的区别
1、简介 tracert（在 Windows 系统中）和 traceroute（在 Unix/Linux 系统中）以及 ping 都是网络诊断工具，但它们的功能和用途有所不同： ping： 用途：ping 是一个网络工具&…...
回归、分类模型的评估指标
1. 分类模型的评估指标 评估机器学习模型的好坏至关重要，它帮助我们判断模型的性能、稳定性以及在实际问题中的应用效果。不同类型的机器学习任务（分类、回归、聚类等）有不同的评估指标。以下是详细介绍常见的模型评估指标，尤其针…...
k8s中如何将pod的标准输出日志输出到一个文件
假设容器的启动命令是 grpcserver，我们将通过修改启动命令，将 grpcserver 的标准输出重定向到指定的日志文件 /var/log/app/grpcserver.log，同时保留标准输出以便 Kubernetes 日志系统仍然能够捕获日志。 目标： 将 grpcserver 的…...
软件工程文档规范要点总结
需求分析文档 1.目标用户应该体现为用例图里的执行者（执行者要标明是哪一类用户） 2.用例模型由功能概述得到，用例顺序图由基本交互过程得到，分析类图由顺序图得到 3.执行者和用例之间的关系：执行、触发、驱动 用例…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分： 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析： CTR…...
)
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中，Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染（即CPU被阻塞），这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案： 对惹，这里有一个游戏开发交流小组&…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示 最终上报fail 解决方法 内核升级导致，需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 （部分有免费额度&#x…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售，主打更强图形性能与沉浸式体验，支持多模态交互，受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
宇树科技，改名了！
提到国内具身智能和机器人领域的代表企业，那宇树科技（Unitree）必须名列其榜。 最近，宇树科技的一项新变动消息在业界引发了不少关注和讨论，即： 宇树向其合作伙伴发布了一封公司名称变更函称，因…...
WPF八大法则：告别模态窗口卡顿
⚙️ 核心问题：阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程，导致后续逻辑无法执行： var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题：…...
自然语言处理——文本分类
文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益（IG） 分类器设计贝叶斯理论：线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别， 有单标签多类别文本分类和多…...