当前位置： 首页 > news >正文

设计一个html+css+js的注册页，对于注册信息进行合法性检测

news 文章来源：https://blog.csdn.net/hxj_686/article/details/143244789 2024/11/26 5:48:17

  1. 综合使用HTML、JavaScript和CSS进行注册页面设计，实现以下若干功能：
    1. 注意整个页面的色调和美观
    2. 使用Frameset+Table布局（div也可）
    3. 对用户ID和用户名、口令不符合条件及时判断
    4. 对口令不一致进行及时判断（34的及时判断，要求提示信息必须显示在同一个页面，也就是说显示在当前的行的后面或者上面或者下面）
    5. 判断Email地址是否合法
    6. 在“提交”后能在新页面显示所有的输入信息

效果展示

以下是代码实现

<!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进行注册页面设计&#xff0c;实现以下若干功能&#xff1a; 注意整个页面的色调和美观使用FramesetTable布局&#xff08;div也可&#xff09;对用户ID和用户名、口令不符合条件及时判断对口令不一致进行及时判断&#xff08;34的及时判断&#…...

编程日记 2024/10/26 0:30:20

语音识别——使用Vosk进行语音识别

文章目录 前言一、Vosk模型1.准备好所需要的语音包2.下载使用 二、使用示例1.文件读取示例2.结合麦克风演示 总结 前言 如何编译Vosk请参照之前的文章&#xff0c;ubuntu编译kaldi和vosk Vosk是语音识别开源框架&#xff0c;支持二十种语言 - 中文&#xff0c;英语&#xff0…...

编程日记 2024/10/26 0:29:19

element ui中el-image组件查看图片的坑

比如说上传组件使用el-image-viewer组件去看，如果用错了，你会发现，你每次只能看一张图片 <template><div><el-upload action="#" list-type="picture-card" :auto-upload="false" :file-list="fileList"@change=&qu…...

编程日记 2024/10/26 0:28:18

LabVIEW水质监测系统

在面对全球性的海洋污染问题时&#xff0c;利用先进技术进行水质监测成为了保护海洋环境的关键手段之一。开发了一种基于LabVIEW的海洋浮标水质监测系统&#xff0c;该系统能够实时监测并评估近海水域的水质状况&#xff0c;旨在为海洋保护和污染防治提供科技支持。 项目背景 …...

编程日记 2024/10/26 0:22:11

SpringMVC之 文件上传和下载

1. 文件上传 1.1 前端注意事项 文件上传操作&#xff0c;前端的表单项需要如下三项设置&#xff1a; &#xff08;1&#xff09;input标签的type属性应设置为file&#xff0c;并且注意不要在input标签中设置value属性&#xff0c;因为这可能导致文件上传不成功&#xff1b; …...

编程日记 2024/10/26 0:20:09

LeetCode Hot 100：二分查找

LeetCode Hot 100&#xff1a;二分查找 35. 搜索插入位置 思路 1&#xff1a;lower_bound class Solution { public:int searchInsert(vector<int>& nums, int target) {return lower_bound(nums.begin(), nums.end(), target) - nums.begin();} };思路 2&#xf…...

编程日记 2024/10/26 0:19:08

打包方式-jar和war的区别

1、jar包 JAR包是类的归档文件&#xff0c;与平台无关的文件格式&#xff0c;其实jar包就是java的类进行编译生成的class文件进行打包的压缩包。 JAR以ZIP文件格式为基础&#xff0c;与ZIP不同的是&#xff0c;JAR不仅用于压缩和发布&#xff0c;还用于部署和封装库、组件和插…...

编程日记 2024/10/26 0:17:06

【论文+源码】基于spring boot的垃圾分类网站

创建一个基于Spring Boot的垃圾分类网站涉及多个步骤&#xff0c;包括环境搭建、项目创建、数据库设计、后端服务开发、前端页面设计等。下面我将引导您完成这个过程。 第一步&#xff1a;准备环境 确保您的开发环境中安装了以下工具&#xff1a; Java JDK 8 或更高版本Mav…...

编程日记 2024/10/26 0:16:06

【C++ STL 模板类】pair 键值对

文章目录 【 1. pair 对象的创建 】【 2. pair 对象的赋值 】【 3. pair 对象的比较 】【 4. pair对象成员的互换】 C STL 标准库提供了 pair 类模板&#xff0c;专门用来将 2 个普通元素 first 和 second&#xff08;可以是 C 基本数据类型、结构体、类自定的类型&#xff09;…...

编程日记 2024/10/26 0:14:04

paddleocr使用FastDeploy 部署工具部署 rknn 模型

在 PC 端转换 pdmodel 模型为 rknn 模型和在板端使用百度飞浆开发的 FastDeploy 部署工具部署 rknn 模型 以下内容是在 PC 端系统为 Ubuntu20.04&#xff0c;板端系统为ubuntu20.04 的环境下实现的 描述&#xff1a; 官网地址 rknn_zoo RKNPU2_SDK …...

编程日记 2024/10/26 0:13:03

Apple Vision Pro市场表现分析：IDC最新数据揭示的真相

随着AR/VR技术逐渐成熟并被更多消费者接受，2024年第二季度（Q2）成为这一领域的一个重要转折点。根据国际数据公司（IDC）发布的最新报告，整个AR/VR市场在本季度经历了显著的增长。接下来，我们将深入探讨Apple Vision Pro在这股增长浪潮中的具体表现。 市场背景 2024年Q2，…...

编程日记 2024/10/26 0:10:01

Mybatis-04.入门-JDBC

一.JDBC 二.原始的JDBC程序代码 &#xff08;不做要求&#xff09; Test public void testJdbc() throws Exception {//1. 注册驱动Class.forName("com.mysql.cj.jdbc.Driver");//2. 获取连接对象String url "jdbc:mysql://localhost:3306/mybatis";Str…...

编程日记 2024/10/26 0:07:59

拥抱云开发的未来：腾讯云数据库、云模板与AI智能化的应用场景探索

本文目录&#xff1a; &#x1f4a1;前言&#xff1a;技术的边界在不断延展&#x1f31f;目录&#x1f308;什么是腾讯云云开发&#xff1f;&#x1f4be;云数据库&#xff1a;让数据成为开发的稳固基石&#x1f951;数据&#xff0c;不再只是数据 &#x1f6e0;云模板&#xf…...

编程日记 2024/10/26 0:05:56

新手铲屎官求推荐，噪音低的宠物空气净化器应该用哪款

当初选择养橘猫就是因为我听到有人说橘猫不容易掉毛才养的&#xff0c;谁知道养了之后和传闻中的不一样&#xff0c;真正的让我明白了什么叫“眼见为实”。 主要是猫掉毛就掉毛&#xff0c;只要我能清理的我都会清理&#xff0c;只要能保证养猫的同时还能保持家里卫生干净就行…...

编程日记 2024/10/26 0:03:54

玄机平台-应急响应-webshell查杀

首先xshell连接 然后进入/var/www/html目录中&#xff0c;将文件变成压缩包 cd /var/www/html tar -czvf web.tar.gz ./* 开启一个http.server服务&#xff0c;将文件下载到本地 python3 -m http.server 放在D盾中检测 基本可以确认木马文件就是这四个 /var/www/html/shell.p…...

编程日记 2024/10/26 0:02:53

LeetCode Hot 100：图论

LeetCode Hot 100&#xff1a;图论 200. 岛屿数量 思路 1&#xff1a;深度优先搜索 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…...

编程日记 2024/10/26 0:00:48

tracert和ping的区别

1、简介 tracert&#xff08;在 Windows 系统中&#xff09;和 traceroute&#xff08;在 Unix/Linux 系统中&#xff09;以及 ping 都是网络诊断工具&#xff0c;但它们的功能和用途有所不同&#xff1a; ping&#xff1a; 用途&#xff1a;ping 是一个网络工具&…...

编程日记 2024/10/25 23:59:47

回归、分类模型的评估指标

1. 分类模型的评估指标 评估机器学习模型的好坏至关重要&#xff0c;它帮助我们判断模型的性能、稳定性以及在实际问题中的应用效果。不同类型的机器学习任务&#xff08;分类、回归、聚类等&#xff09;有不同的评估指标。以下是详细介绍常见的模型评估指标&#xff0c;尤其针…...

编程日记 2024/10/25 23:58:46

k8s中如何将pod的标准输出日志输出到一个文件

假设容器的启动命令是 grpcserver&#xff0c;我们将通过修改启动命令&#xff0c;将 grpcserver 的标准输出重定向到指定的日志文件 /var/log/app/grpcserver.log&#xff0c;同时保留标准输出以便 Kubernetes 日志系统仍然能够捕获日志。 目标&#xff1a; 将 grpcserver 的…...

编程日记 2024/10/25 23:56:44

软件工程文档规范要点总结

需求分析文档 1.目标用户应该体现为用例图里的执行者&#xff08;执行者要标明是哪一类用户&#xff09; 2.用例模型由功能概述得到&#xff0c;用例顺序图由基本交互过程得到&#xff0c;分析类图由顺序图得到 3.执行者和用例之间的关系&#xff1a;执行、触发、驱动 用例…...

编程日记 2024/10/25 23:54:42

Django 序列化serializers

在Django中&#xff0c;序列化通常指的是将数据库中的模型数据转换为JSON、XML或其他格式的过程。Django提供了内置的序列化工具&#xff0c;可以通过django.core.serializers模块进行序列化操作。 当你使用Django的序列化功能时&#xff0c;可以序列化以下两种对象类型&#…...

编程日记 2024/10/25 23:52:40

混个1024勋章

一眨眼毕业工作已经一年了&#xff0c;偶然进了游戏公司成了一名初级游戏服务器开发。前两天总结的时候&#xff0c;本来以为自己这一年没学到多少东西&#xff0c;但是看看自己的博客其实也有在进步&#xff0c;虽然比不上博客里的众多大佬&#xff0c;但是回头看也算是自己的…...

编程日记 2024/10/25 23:50:37

Java Spring Boot 项目开发示例指南

开发和扩展一个 Java Spring Boot 项目可以分为几个步骤。以下是一个简单的指南&#xff0c;涵盖项目的创建、基本功能的实现、以及扩展的示例。 第一步&#xff1a;创建 Spring Boot 项目 使用 Spring Initializr 创建项目: 访问 Spring Initializr选择项目的配置&#xff08…...

编程日记 2024/10/25 23:48:35

Python学习路线：从新手到专家

引言 Python 是一种高级编程语言&#xff0c;以其简洁清晰的语法而闻名&#xff0c;被广泛应用于Web开发、数据科学、人工智能、自动化脚本等领域。无论你是编程初学者还是有经验的开发者&#xff0c;Python 都是一个值得学习的语言。本文将提供一份详细的Python学习路线图&am…...

编程日记 2024/10/25 23:47:35

R实验——logistic回归、LDA、QDAKNN

数据集介绍&#xff1a; mpg&#xff0c;miles per gallon即油耗&#xff0c;这个数据集来自卡内基梅隆大学维护的StatLib库。1983年美国统计协会博览会使用了该数据集。这个数据集是对StatLib库中提供的数据集稍加修改的版本。根据Ross Quinlan(1993)在预测属性“mpg”中的使…...

编程日记 2024/10/25 23:45:33

Java 使用 itextpdf 自定义 生成 pdf

Java 使用 itextpdf 自定义 生成 pdf maven 依赖实现docker 服务 字体文件找不到问题 maven 依赖 <!-- iText 7 --> <dependency><groupId>com.itextpdf</groupId><artifactId>itext7-core</artifactId><version>7.2.3</version…...

编程日记 2024/10/25 23:44:32

Rust小练习，编写井字棋

画叉画圈的游戏通常指的是 井字棋&#xff08;Tic-Tac-Toe&#xff09;&#xff0c;是一个简单的两人游戏&#xff0c;规则如下&#xff1a; 游戏规则 棋盘&#xff1a;游戏在一个3x3的方格上进行。玩家&#xff1a;有两个玩家&#xff0c;一个用“X”表示&#xff0c;另一个…...

编程日记 2024/10/25 23:43:31

RabbitMQ 入门(八)SpringAMQP消息转换器

一、消息转换器 Spring会把你发送的消息序列化为字节发送给MQ&#xff0c;接收消息的时候&#xff0c;还会把字节反序列化为Java对象。 只不过&#xff0c;默认情况下Spring采用的序列化方式是JDK序列化。众所周知&#xff0c;JDK序列化存在下列问题&#xff1a; - 数…...

编程日记 2024/10/25 23:42:30

【C++】一文带你深入理解C++异常机制

⭐️个人主页&#xff1a;小羊 ⭐️所属专栏&#xff1a;C 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 前言一、C语言处理错误的方式二、C异常三、异常的使用3.1 异常的抛出和捕获3.2 异常的重新抛出3.3 异常安全3.4 异常规范 四、自定义异…...

编程日记 2024/10/25 23:41:29

Qt之QObject

简介 QObject是qt中所有对象的基类&#xff0c;也是信号槽的基础 结构 #mermaid-svg-mpp2FHEcRCzUK75S {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-mpp2FHEcRCzUK75S .error-icon{fill:#552222;}#mermaid-svg-…...

编程日记 2024/10/25 23:39:27

中国国家住房和城乡建设部网站首页/网络营销外包公司

题意 题目链接 Sol 不愧是dls出的比赛啊&#xff0c;265个交了题的人只有8个有分Orz 做完这题&#xff0c;&#xff0c;感觉自己的位运算dp姿势升华了。。。 首先最裸的dp应该比较好想&#xff0c;设\(f[i][j][k]\)表示前\(i\)个数选出来的数异或和为\(j\)&#xff0c;按位与和…...

编程日记 2024/11/26 5:19:11

小说网站模板建站/网址之家

作者: Alastair Townsend (经过作者亲自授权) 英文网址: http://www.alatown.com/spline-history-architecture 中文整理: 马海东 ,并提供了一个deboor曲线算法的grasshopper插件(见文末的下载链接) 一些建筑师将采用自由曲面设计和计算机辅助制造技术称为前沿&#xff0c;甚…...

编程日记 2024/11/26 2:53:59

西安网站建设app建设/黄冈网站推广软件

element ui 中的步骤条组件——steps 最近在写几个小组件&#xff0c;嗯&#xff0c;组件的编写比搭建页面和渲染数据要难一些&#xff0c;难就难在思想&#xff0c;这个东西看不见摸不着&#xff0c;得练习&#xff0c;得思考。 时间列表组件&#xff0c;其实不用steps组件也…...

编程日记 2024/11/25 22:46:27

wordpress好还是/网络推广外包公司

http://blog.csdn.net/u011997156/article/details/44806523转载于:https://www.cnblogs.com/BlogRegisterboby/p/6653974.html...

编程日记 2024/11/25 20:10:34

自己开网站需要什么/推广软文案例

一、Java堆溢出 内存溢出和内存泄露 内存溢出&#xff1a;指程序运行过程中无法申请到足够的内存而导致的一种错误。内存溢出通常发生于OLD段或Perm段垃圾回收后&#xff0c;仍然无内存空间容纳新的Java对象的情况。 内存泄露&#xff1a;指程序中动态分配内存给一些临时对象&a…...

编程日记 2024/11/25 17:01:46

免费英文网站模板/发免费广告电话号码

被面试人是我的一位粉丝近期刚刚结束了蚂蚁金服的三轮技术面试&#xff0c;面完之后他跟我说很累&#xff0c;直言不想再体验了。 他的面试经历我仔细看了看&#xff0c;一面重点在基础知识的考查&#xff0c;二面重点在项目以及对框架的使用与理解上&#xff0c;三面压力面&a…...

编程日记 2024/11/25 15:47:23