设计一个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.执行者和用例之间的关系：执行、触发、驱动 用例…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了 先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...
服务器硬防的应用场景都有哪些？
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式，避免服务器受到各种恶意攻击和网络威胁，那么，服务器硬防通常都会应用在哪些场景当中呢？ 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码： https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码，实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）
本期内容并不是很难，相信大家会学的很愉快，当然对于有后端基础的朋友来说，本期内容更加容易了解，当然没有基础的也别担心，本期内容会详细解释有关内容 本期用到的软件：yakit（因为经过之前好多期…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...
VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式，然后找到相应的网卡（可以查看自己本机的网络连接） windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置，选择刚才配置的桥接模式 静态ip设置： 我用的ubuntu24桌…...
Ubuntu Cursor升级成v1.0
0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开，快捷键也不好用，当看到 Cursor 升级后，还是蛮高兴的 1. 下载 Cursor 下载地址：https://www.cursor.com/cn/downloads 点击下载 Linux (x64) ，…...
破解路内监管盲区：免布线低位视频桩重塑停车管理新标准
城市路内停车管理常因行道树遮挡、高位设备盲区等问题，导致车牌识别率低、逃费率高，传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法，正成为破局关键。该设备安装于车位侧方0.5-0.7米高度，直接规避树枝遮…...