登录/注册

目录

 1.HTML

2.CSS

 3.JS

4.资源

5.运行结果

 6.下载链接

7.注意事项 


 1.HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册</title><link rel="stylesheet" href="../css/register.css">
</head>
<body><div class="register"><div class="cont"><ul class="list"><li><span>用户名</span><input type="text" class="userName"><img src="../image/sure.png" alt="必填"></li><li><span>Email</span><input type="email" class="email"><img src="../image/sure.png" alt="必填"></li><li><span>密码</span><input type="password" class="password"><img src="../image/sure.png" alt="必填"></li><li class="qiang"><span>密码强度</span><p><span class="weak">弱</span><span class="medium">中</span><span class="strong">强</span></p></li><li><span>确认密码</span><input type="password" class="passwordTrue"><img src="../image/sure.png" alt="必填"></li><li><span>MSN</span><input type="text" class="msn"></li><li><span>QQ</span><input type="text" class="qq"></li><li><span>办公电话</span><input type="text" class="tel"></li><li><span>家庭电话</span><input type="text" class="phone"></li><li><span>手机</span><input type="text" class="mobile"></li><li class="yan"><span>验证码</span><input type="text"><p class="yanMa">J6EP</p></li><li><span></span><input type="checkbox" class="agree"><p>我已看过并接受《<a href="##">用户协议</a>》</p></li><li><span></span><button class="btn">立即注册</button></li></ul></div></div>
</body>
</html>
<script src="../js/register.js"></script>

2.CSS

*{margin: 0;padding: 0;}
ul,li,ol{list-style-type: none;}
button{cursor: pointer;border: none;background: rgba(255, 255, 255, 1);}
.register{width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;
}
.cont{width: 320px;height: 450px;background: #fbfbfb;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
.list{width: 270px;
}
.list li{width: 100%;height: 20px;display: flex;align-items: center;margin-bottom: 10px;font-size: 12px;
}
.list li span{width: 60px;height: 100%;line-height: 20px;text-align: right;margin-right: 10px;
}
.list li input{/* width: 180px; */height: 100%;border: 1px #ccc solid;
}
.list li img{width: 10px;height: 10px;margin-left: 10px;
}
.list li p{margin-left: 10px;
}
.list .qiang p{width: 120px;display: flex;align-items: center;justify-content: space-around;
}
.list .yan input{width: 80px;
}
.list .yan p{width: 80px;height: 100%;line-height: 20px;text-align: center;border: 1px #ccc solid;background: url(../image/yan.png) no-repeat 0 0/100% 100%;color: #fff;
}
.btn{width: 100px;height: 40px;background: #4da4d2;color: #fff;margin-top: 10px;border-radius: 5px;
}
.yanMa{cursor: pointer;
}

 3.JS

let btn = document.querySelector('.btn');let userName = document.querySelector('.userName');let email = document.querySelector('.email');let password = document.querySelector('.password');let passwordTrue = document.querySelector('.passwordTrue');let msn = document.querySelector('.msn');let qq = document.querySelector('.qq');let tel = document.querySelector('.tel');let phone = document.querySelector('.phone');let mobile = document.querySelector('.mobile');let yan = document.querySelector('.yan input');let yanMa = document.querySelector('.yanMa');let agree = document.querySelector('.agree');let weak = document.querySelector('.weak');let medium = document.querySelector('.medium');let strong = document.querySelector('.strong');// 密码强度function checkPasswordStrength(password) {if(password.length<5){alert('最少输入6位密码');}else if(password.length>25){alert('最多输入26位密码');}else{let code=0;const hasNumber = /\d/;  // 包含数字const hasLetter = /[a-zA-Z]/;  // 包含字母const hasSymbol = /[!@#$%^&*(),.?":{}|<>]/;  // 包含特殊字符if (hasNumber.test(password)) code++;if (hasLetter.test(password)) code++;if (hasSymbol.test(password)) code++;// 检查密码强度if (code==1) {weak.style.color='#f00';medium.style.color = '#000';strong.style.color = '#000';} else if (code==2) {weak.style.color='#000';medium.style.color = '#f00';strong.style.color = '#000';} else if (code==3) {weak.style.color='#000';medium.style.color = '#000';strong.style.color = '#f00';} else {weak.style.color='#000';medium.style.color = '#000';strong.style.color = '#000';}}};// 失焦判断密码强度password.onblur=function(){checkPasswordStrength(password.value);  }// 验证码function yanZheng(){// 包含所有可能的字符const characters = '0123456789abcdefghijklmnopqrstuvwxyz';// 生成四位验证码let verificationCode = '';for (let i = 0; i < 4; i++) {const randomIndex = Math.floor(Math.random() * characters.length);verificationCode += characters.charAt(randomIndex);}yanMa.innerHTML=verificationCode.toUpperCase();};yanZheng();// 点击验证码刷新验证码yanMa.onclick=function(){yanZheng();   };// 点击注册按钮btn.onclick=function(){let yanEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;let yanTel = /^1[3-9]\d{9}$/;let dataObj={userName:userName.value,email:email.value,password:password.value,msn:msn.value,qq:qq.value,tel:tel.value,phone:phone.value,mobile:mobile.value,};yan.value=yan.value.toUpperCase();if(userName.value==''){alert('请输入用户名');}else if(email.value==''){alert('请输入Email');}else if(!yanEmail.test(email.value)){alert('请输入正确的Email');}else if(password.value==''){alert('请输入密码');}else if(passwordTrue.value==''){alert('请确认密码');}else if(password.value!=passwordTrue.value){alert('两次密码输入不一致,请重新输入。')}else if(yan.value==''||yan.value!=yanMa.innerHTML){console.log(yan.value,yanMa.innerHTML);if(confirm('验证码输入不正确,请重新输入')){yanZheng();}else{yanZheng();}}else if(!agree.checked){if(confirm('请同意用户协议')){agree.checked=!agree.checked;}else{}}else{fetch('http://localhost:8080/api/register',{method: 'POST',headers: {'Content-Type': 'application/json', // 设置请求头的 Content-Type},body: JSON.stringify(dataObj)}).then(response => response.json()).then(data => {console.log(data);if(data.code==200){alert('注册成功');}}).catch(error => {console.error('Error:', error);});}};

4.资源

5.运行结果

 6.下载链接

在此下载压缩包

【免费】登录、注册的建议通用模板资源-CSDN文库

7.注意事项 

此压缩包 包含前后端简单交互,后端需要用到Node.js,运行口令 nodemon app.js 

或者在serve文件夹直接运行run.bat文件,运行成功后打开html即可。注意:run.bat运行成功后不要退出cmd。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/377294.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【学习笔记】无人机(UAV)在3GPP系统中的增强支持(八)-通过无人机进行无线接入

引言 本文是3GPP TR 22.829 V17.1.0技术报告&#xff0c;专注于无人机&#xff08;UAV&#xff09;在3GPP系统中的增强支持。文章提出了多个无人机应用场景&#xff0c;分析了相应的能力要求&#xff0c;并建议了新的服务级别要求和关键性能指标&#xff08;KPIs&#xff09;。…

基于Rspack实现大仓应用构建提效实践|得物技术

一、实践背景 随着项目的逐步迭代&#xff0c;代码量和依赖的逐渐增长&#xff0c;应用的构建速度逐步进入缓慢期。以目前所在团队的业务应用来看&#xff08;使用webpack构建&#xff09;&#xff0c;应用整体构建耗时已经普遍偏高&#xff0c;影响日常开发测试的使用效率&am…

GUI界面开发之tkinter(一)

Tkinter是一个内置的Python库&#xff0c;用于创建图形用户界面&#xff08;GUI&#xff09;。它提供了一组工具和小部件&#xff0c;用于创建窗口、对话框、按钮、菜单和其他GUI元素。 在本篇文章中&#xff0c;主要介绍了窗口等知识点。 大家好&#xff01;我是码银&#x1…

【高中数学/幂函数】比较a=2^0.3,b=3^0.2,c=7^0.1的大小

【问题】 比较a2^0.3,b3^0.2,c7^0.1的大小 【解答】 a2^0.32^3/10(2^3)^1/108^1/10 b3^0.23^2/10(3^2)^1/109^1/10 c7^0.17^1/10 由于yx^1/10在x正半轴是增函数&#xff0c;底数大的得数就大。 因为9>8>7,所以b>a>c 【图像】 在图像上绘出曲线yx^1/10&…

springcolud学习01

创建项目 修改pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.o…

【游戏引擎之路】登神长阶(七)——x86汇编学习:凡做难事,必有所得

5月20日-6月4日&#xff1a;攻克2D物理引擎。 6月4日-6月13日&#xff1a;攻克《3D数学基础》。 6月13日-6月20日&#xff1a;攻克《3D图形教程》。 6月21日-6月22日&#xff1a;攻克《Raycasting游戏教程》。 6月23日-7月1日&#xff1a;攻克《Windows游戏编程大师技巧》。 7月…

如何指定多块GPU卡进行训练-数据并行

训练代码&#xff1a; train.py import torch import torch.nn as nn import torch.optim as optim from torch.utils.data import DataLoader, Dataset import torch.nn.functional as F# 假设我们有一个简单的文本数据集 class TextDataset(Dataset):def __init__(self, te…

jmeter分布式(四)

一、gui jmeter的gui主要用来调试脚本 1、先gui创建脚本 先做一个脚本 演示&#xff1a;如何做混合场景的脚本&#xff1f; 用211的业务比例 ①启动数据库服务 数据库服务&#xff1a;包括mysql、redis mysql端口默认3306 netstat -lntp | grep 3306处于监听状态&#xf…

【C++】—— 初识C++

【C】—— 初识C 一、什么是 C二、C 的发展历史三、C 版本更新四、C 的重要性五、C 在工作领域中的运用六、C 书籍推荐&#xff1a; 一、什么是 C C语言 是结构化和模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&#xff0c;规模较大的程序&#xff0c;需要…

使用嵌入式知识打造智能手环:nRF52蓝牙开发实战(C++/BLE/传感器)

项目概述 现代人越来越注重健康管理&#xff0c;智能穿戴设备应运而生。本项目旨在利用低功耗蓝牙芯片nRF52832&#xff0c;结合加速度计、心率传感器、陀螺仪等传感器&#xff0c;开发一款功能完善、性能稳定的智能运动手环。该手环能够实时采集用户的运动数据和生理指标&…

vue3 - vue项目自动检测更新

vue3 GitHub Demo 地址 vue3在线预览 vue2 GitHub Demo 地址 vue2 在线预览 web项目当页面检测到需要更新&#xff0c;然后弹框提示是否更新&#xff08;刷新页面&#xff09;这种可以通过纯前端实现也可以通过接口实现 接口实现&#xff1a;通过调用接口轮询和本地的版本号比…

护网HW面试——redis利用方式即复现

参考&#xff1a;https://xz.aliyun.com/t/13071 面试中经常会问到ssrf的打法&#xff0c;讲到ssrf那么就会讲到配合打内网的redis&#xff0c;本篇就介绍redis的打法。 未授权 原理&#xff1a; Redis默认情况下&#xff0c;会绑定在0.0.0.0:6379&#xff0c;如果没有采用相关…

FPGA设计之跨时钟域(CDC)设计篇(1)----亚稳态到底是什么?

1、什么是亚稳态? 在数字电路中,如果数据传输时不满足触发器FF的建立时间要求Tsu和保持时间要求Th,就可能产生亚稳态(Metastability),此时触发器的输出端(Q端)在有效时钟沿之后比较长的一段时间都会处于不确定的状态(在0和1之间振荡),而不是等于数据输入端(D端)的…

强制升级最新系统,微软全面淘汰Win10和部分11用户

说出来可能不信&#xff0c;距离 Windows 11 正式发布已过去整整三年时间&#xff0c;按理说现在怎么也得人均 Win 11 水平了吧&#xff1f; 然而事实却是&#xff0c;三年时间过去 Win 11 占有率仅仅突破到 29%&#xff0c;也就跳起来摸 Win 10 屁股的程度。 2024 年 6 月 Wi…

功率继电器【HF46F】

目的&#xff1a;通过单片机控制继电器动作。 原理图如下&#xff0c;原理图中使用的继电器为HF46F5H&#xff0c; 上述原理图的电路原理&#xff1a; 在这个电路图中&#xff0c;电源开关相关的部分包括一个电源开关、一个三极管Q1、一个二极管D2和一个继电器K1。当电源开关…

阿里云ECS服务器安装jdk并运行jar包,访问成功详解

安装 OpenJDK 8 使用 yum 包管理器安装 OpenJDK 8 sudo yum install -y java-1.8.0-openjdk-devel 验证安装 安装完成后&#xff0c;验证 JDK 是否安装成功&#xff1a; java -version设置 JAVA_HOME 环境变量&#xff1a; 为了确保系统中的其他应用程序可以找到 JDK&…

开源必看!50 多个本地运行 LLM 的开源选项

在我之前的文章中&#xff0c;我讨论了使用本地托管的开源权重 LLM 的好处&#xff0c;例如数据隐私和成本节约。通过主要使用免费模型并偶尔切换到 GPT-4&#xff0c;我的月度开支从 20 美元降至 0.50 美元。设置端口转发到本地 LLM 服务器是移动访问的免费解决方案。 有许多…

WSL2 的安装与运行 Linux 系统

前言 适用于 Linux 的 Windows 子系统 (WSL) 是 Windows 的一项功能&#xff0c;允许开发人员在 Windows 系统上直接安装并使用 Linux 发行版。不用进行任何修改&#xff0c;也无需承担传统虚拟机或双启动设置的开销。 可以将 WSL 看作也是一个虚拟机&#xff0c;但是它更为便…

let/const/var的区别及理解

在JavaScript中&#xff0c;let、const 和 var 是用来声明变量的关键字&#xff0c;但它们之间在作用域、变量提升、重复声明等方面存在区别&#xff0c;详细情况如下: 1. let、const、var 的区别 (1) 块级作用域 let 和 const&#xff1a;具有块级作用域&#xff0c;由 {} 包…

记录些Redis题集(2)

Redis 的多路IO复用 多路I/O复用是一种同时监听多个文件描述符&#xff08;如Socket&#xff09;的状态变化&#xff0c;并能在某个文件描述符就绪时执行相应操作的技术。在Redis中&#xff0c;多路I/O复用技术主要用于处理客户端的连接请求和读写操作&#xff0c;以实现高并发…