设计一个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.执行者和用例之间的关系：执行、触发、驱动 用例…...
Cursor实现用excel数据填充word模版的方法
cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例，…...
无法与IP建立连接，未能下载VSCode服务器
如题，在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈，发现是VSCode版本自动更新惹的祸！！！ 在VSCode的帮助->关于这里发现前几天VSCode自动更新了，我的版本号变成了1.100.3 才导致了远程连接出…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中，我们会遇到使用 java 调用 dll文件 的情况，此时大概率出现UnsatisfiedLinkError链接错误，原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用，结果 dll 未实现 JNI 协…...
【解密LSTM、GRU如何解决传统RNN梯度消失问题】
解密LSTM与GRU：如何让RNN变得更聪明？ 在深度学习的世界里，循环神经网络（RNN）以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而，传统RNN存在的一个严重问题——梯度消失&#…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案
JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停 1. 安全点（Safepoint）阻塞 现象：JVM暂停但无GC日志，日志显示No GCs detected。原因：JVM等待所有线程进入安全点（如…...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录，但是由于这个树组件的节点越来越多，导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多，导致的浏览器卡顿，这里很明显就需要用到虚拟列表的技术&…...
深度学习之模型压缩三驾马车：模型剪枝、模型量化、知识蒸馏
一、引言 在深度学习中，我们训练出的神经网络往往非常庞大（比如像 ResNet、YOLOv8、Vision Transformer），虽然精度很高，但“太重”了，运行起来很慢，占用内存大，不适合部署到手机、摄…...
五、jmeter脚本参数化
目录 1、脚本参数化 1.1 用户定义的变量 1.1.1 添加及引用方式 1.1.2 测试得出用户定义变量的特点 1.2 用户参数 1.2.1 概念 1.2.2 位置不同效果不同 1.2.3、用户参数的勾选框 - 每次迭代更新一次 总结用户定义的变量、用户参数 1.3 csv数据文件参数化 1、脚本参数化 …...
GB/T 43887-2024 核级柔性石墨板材检测
核级柔性石墨板材是指以可膨胀石墨为原料、未经改性和增强、用于核工业的核级柔性石墨板材。 GB/T 43887-2024核级柔性石墨板材检测检测指标： 测试项目 测试标准 外观 GB/T 43887 尺寸偏差 GB/T 43887 化学成分 GB/T 43887 密度偏差 GB/T 43887 拉伸强度…...