设计一个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.执行者和用例之间的关系：执行、触发、驱动 用例…...
23-Oracle 23 ai 区块链表（Blockchain Table）
小伙伴有没有在金融强合规的领域中遇见，必须要保持数据不可变，管理员都无法修改和留痕的要求。比如医疗的电子病历中，影像检查检验结果不可篡改行的，药品追溯过程中数据只可插入无法删除的特性需求；登录日志、修改日志…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域，MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步，这两种通讯协议也正在被逐步融合，形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）
笔记整理：刘治强，浙江大学硕士生，研究方向为知识图谱表示学习，大语言模型 论文链接：http://arxiv.org/abs/2407.16127 发表会议：ISWC 2024 1. 动机 传统的知识图谱补全（KGC）模型通过…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一） 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
三体问题详解
从物理学角度，三体问题之所以不稳定，是因为三个天体在万有引力作用下相互作用，形成一个非线性耦合系统。我们可以从牛顿经典力学出发，列出具体的运动方程，并说明为何这个系统本质上是混沌的，无法得到一般解…...
网络编程（UDP编程）
思维导图 UDP基础编程（单播） 1.流程图 服务器：短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
日常一水C
多态 言简意赅：就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过，当子类和父类的函数名相同时，会隐藏父类的同名函数转而调用子类的同名函数，如果要调用父类的同名函数，那么就需要对父类进行引用&#…...
Spring Security 认证流程——补充
一、认证流程概述 Spring Security 的认证流程基于 过滤器链（Filter Chain），核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤： 用户提交登录请求拦…...
篇章二 论坛系统——系统设计
目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...