<!DOCTYPE html>
<html lang="en">
<head>
<title>TNT注册界面</title>
<style>
input {
margin: 5px auto;
border-radius: 16px;
}
input:hover {
border: 0.5px solid rgb(123, 123, 123);
transition: 0.5s;
border-radius: 4px;
}
body {
margin: 0;
padding: 0;
background-color:rgb(123, 123, 123);
background-size: 1600px 760px
}
* {
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#loginDiv {
width: 37%;
display: flex;
justify-content: center;
align-items: center;
height: 650px;
border: 1px solid rgb(0, 0, 0);
background-color: rgba(0, 0, 0, .2);
box-shadow: 7px 7px 17px rgba(0, 0, 0, 0.5);
border-radius: 5px;
}
#name_trip {
margin-left: 50px;
color: red;
}
#userType{
color:black;
}
p,
.sexDiv {
margin-top: 10px;
margin-left: 20px;
color: azure;
}
.sexDiv>input,
.hobby>input {
width: 30px;
height: 17px;
}
input,
select {
margin-left: 15px;
border-radius: 5px;
border-style: hidden;
height: 30px;
width: 140px;
background-color: rgba(216, 191, 216, 0.5);
outline: none;
color: #f0edf3;
padding-left: 10px;
}
.button {
border-color: cornsilk;
background-color: rgba(100, 149, 237, .7);
color: aliceblue;
border-style: hidden;
border-radius: 5px;
width: 100px;
height: 31px;
font-size: 16px;
}
.introduce {
margin-left: 110px;
}
.introduce>textarea {
background-color: rgba(216, 191, 216, 0.5);
border-style: hidden;
outline: none;
border-radius: 5px;
}
h1 {
text-align: center;
margin-bottom: 20px;
margin-top: 20px;
color: #f0edf3;
}
</style>
</head>
<body>
<div id="loginDiv">
<form action="">
<h1>注册</h1>
<p>用户姓名:<input id="userNname" type="text" ><label id="name_trip"></label></p>
<p>用户密码:<input id="password" type="password" ><label id="password_trip"></label></p>
<p>确认密码:<input id="surePassword" type="password" onkeyup="checkpassword()" ><label id="surePassword_trip"></label></p>
<span id="tishi"></span></input>
<p>
用户类型:
<select name="type" id="userType">
<option value="0">请选择</option>
<option value="1">玉米粒</option>
<option value="2">唯粉</option>
<option value="3">CP粉</option>
<option value="4">爆米花</option>
</select>
<label id="type_trip"></label>
</p>
<div class="sexDiv">
用户性别:
<input class="userSex" name="sex" value="boy" type="radio">男
<input class="userSex" name="sex" value="girl" type="radio">女
<label id="sex_trip"></label>
</div>
<p>
出生日期:
<input id="birthday" type="date">
<label id="birthday_trip"></label>
</p>
<p class="hobby">
兴趣爱好:
<input type="checkbox" name="hobby" value="read">阅读
<input type="checkbox" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="sport">运动
<label id="hobby_trip"></label>
</p>
<p>
电子邮件:
<input id="email" type="email" >
<label id="emil_trip"></label>
</p>
<p>
手机号:
<input id="number" type="number" >
<label id="emil_trip"></label>
</p>
<p style="text-align: center;">
<!-- <button id="R_registerbtn" class="button" onclick=javascrtpt:jump()>注册</button> -->
<input type="button" class="button" onclick=javascrtpt:jump() value="提交">
<input type="reset" class="button" value="重置">
</p>
</form>
</div>
<script>
email.onchange = function(){
var email = this.value;
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if(!reg.test(email)){
alert("邮箱格式不正确，请重新输入！");
return false;
}
}
userNname.onchange = function(){
var userNname= this.value;
var reg = /^\S{1,5}$/;
if(!reg.test(userNname)){
alert("用户名长度不能超过5位！");
return false;
}
}
password.onchange = function(){
var passwordd = this.value;
var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
if(!reg.test(password)){
alert("密码长度要大于6位，由数字和字母组成,请重新输入！");
return false;
}
}
function checkpassword() {
var password = document.getElementById("password").value;
var repassword = document.getElementById("surePassword").value;
if(password == repassword) {
// alert("两次密码输入一致");
document.getElementById("tishi").innerHTML="<font color='green'>两次密码输入一致</font>";
}else {
// alert("两次密码输入一致");
document.getElementById("tishi").innerHTML="<font color='red'>两次输入密码不一致!</font>";
}
}
function jump(){
localStorage.setItem("username",document.getElementById("userNname").value);
localStorage.setItem("password",document.getElementById("password").value);
localStorage.setItem("email",document.getElementById("email").value);
var Email = document.getElementById("email");
var User = document.getElementById("userNname");
var Toux = document.getElementById("number");
var Password = document.getElementById("password");
var Repassword = document.getElementById("surePassword");
if(Email.value == "" || User.value ==""|| Toux.value ==""|| Password.value =="") {
alert("邮箱、用户名、手机号或密码不能为空！");
return false;
}
else if(Password.value == Repassword.value) {
alert("注册成功，欢迎进入登录界面！");
window.location.href="登录.html";
}
else{
alert("注册信息有误！");
}
}
</script>
</body>
web前端登陆注册界面（html+css+js）
需积分: 0 8 浏览量
2023-06-22
23:46:11
上传
评论 3
收藏 14.55MB ZIP 举报
作业模拟.zip （20个子文件） 
作业模拟 
jquery-3.1.1.min.js 85KB
注册.html 7KB image TNT2.webp 130KB
2.jpg 333KB TNT10 .jpg 87KB TNT7.jpg 64KB 1.jpg 105KB TNT8.jpg 158KB TNT6.jpg 145KB 5.jpg 1.67MB TNT5.jpg 275KB TNT9.jpg 197KB TNT4.jpg 94KB TNT3.jpg 105KB 3.jpg 53KB TNT1.webp 76KB 少年时代.mp3 10.87MB 4.jpg 245KB 简介.html 6KB 登录.html 4KB资源评论
