html+css+js实现简单登陆注册页面
先看一下最终效果，登陆和注册
背景图片：
附源码：
login.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>login</title>
<style>
* {
margin: 0;
padding: 0;
} html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background: url(Desert.jpg) no-repeat 0px 0px;
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
} body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
} #loginDiv {
width: 37%;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: rgba(75, 81, 95, 0.3);
box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
border-radius: 5px;
} #name_trip {
margin-left: 50px;
color: red;
} p {
margin-top: 30px;
margin-left: 20px;
color: azure;
} input {
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;
}
</style>
</head> <body>
<div id="loginDiv">
<form action="" id="form">
<h1 style="text-align: center;color: aliceblue;">LOGIN IN</h1>
<p>User Name:<input id="userNname" type="text"><label id="name_trip"></label></p> <p>Password: <input id="password" type="password"><label id="password_trip"></label></p> <div style="text-align: center;margin-top: 30px;">
<input type="submit" class="button" value="login up">
<input type="reset" class="button" value="reset">
</div>
</form>
</div> </body>
</html>
register.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>register</title>
<style>
* {
margin: 0;
padding: 0;
} html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background: url(Desert.jpg) no-repeat 0px 0px;
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
} body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
} #loginDiv {
width: 37%;
display: flex;
justify-content: center;
align-items: center;
height: 650px;
background-color: rgba(75, 81, 95, 0.3);
box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
border-radius: 5px;
} #name_trip {
margin-left: 50px;
color: red;
} 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;
} b {
margin-left: 50px;
color: #FFEB3B;
font-size: 10px;
font-weight: initial;
}
</style>
</head> <body>
<div id="loginDiv">
<form action="">
<h1>REGESTER</h1>
<p>用户姓名:<input id="userNname" type="text" autofocus required><label id="name_trip"></label></p> <p>用户密码:<input id="password" type="password" required><label id="password_trip"></label></p> <p>确认密码:<input id="surePassword" type="password" required><label id="surePassword_trip"></label></p> <p>
用户类型:
<select name="type" id="userType">
<option value="0">请选择</option>
<option value="1">普通类型</option>
<option value="2">VIP类型</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" required>
<label id="emil_trip"></label>
</p> <p> 自我介绍:</p>
<div class="introduce">
<textarea name="introduce" cols="30" id="introduceText" required rows="10"></textarea>
<label id="introduce_trip"></label>
</div> <p style="text-align: center;">
<input type="submit" class="button" onblur="checkForm()" onclick="return submitT()" value="提交">
<input type="reset" class="button" value="重置">
</p>
</form>
</div> </body>
<script type="text/javascript">
function trip(obj, trip) {
document.getElementById(obj).innerHTML = "<b>" + trip + "</b>";
} function checkSex() {
var sexNum = document.getElementsByName("sex");
var sex = "";
for (let i = 0; i < sexNum.length; ++i) {
if (sexNum[i].checked) {
sex = sexNum[i];
} }
if (sex == "") {
trip("sex_trip", "ERROR!!");
return false;
} else {
trip("sex_trip", "OK!!");
}
} function checkHobby() {
var hobbyNum = document.getElementsByName("hobby");
var hobby = "";
for (let i = 0; i < hobbyNum.length; ++i) {
if (hobbyNum[i].checked) {
hobby = hobbyNum[i];
}
}
if (hobby == "") {
trip("hobby_trip", "ERROR!!");
return false;
} else {
trip("hobby_trip", "OK!!"); }
} function checkSelect() {
var myselect = document.getElementById("userType");
var index = myselect.selectedIndex;
var checkValue = myselect.options[index].value;
if (checkValue == 0) {
trip("type_trip", "请选择!!");
return false;
} else {
trip("type_trip", "OK!!");
}
} function checkForm() {
checkSelect();
checkHobby();
checkSex(); var trip = document.getElementsByName("em");
var tripV = trip.innerHTML();
//获取用户名输入项
var userNname = document.getElementById("userNname");
var uName = userNname.value;
if (uName.length < 1 || uName.length > 10) {
trip("name_trip", "账号长度为1-10位!!");
return false;
} else {
trip("name_trip", "OK!!"); } //密码长度大于6 和确认必须一致
var password = document.getElementById("password");
var userPass = password.value;
if (userPass.length < 6) {
trip("password_trip", "密码要>6位!!");
return false;
} else {
trip("password_trip", "OK!!");
} //获取确认密码框的值 var
var surePassword = document.getElementById("surePassword");
var surePass = surePassword.value;
if (userPass != surePass) {
trip("surePassword_trip", "两次密码不一致!!");
return false;
} //校验邮箱:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
var inputEmail = document.getElementById("email");
var uEmail = inputEmail.value;
if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)) {
trip("emil_trip", "邮箱不合法!!");
return false;
} else {
trip("emil_trip", "OK!!");
} // 校验自我介绍
var introduceText = document.getElementById("introduceText");
var introduce = introduceText.value;
if (introduce.length < 3 || uName.length > 60) {
trip("introduce_trip", "长度为3-50字!!");
return false;
} else {
trip("introduce_trip", "OK!!");
} return true;
} function submitT() {
if (checkForm()) {
return true;
} else {
return false;
}
}
</script>
</html>
html+css+js实现简单登陆注册页面的更多相关文章
- Android笔记-4-实现登陆页面并跳转和简单的注册页面
实现登陆页面并跳转和简单的注册页面 首先我们来看看布局的xml代码 login.xml <span style="font-family:Arial;font-size:18px; ...
- git冲突解决、线上分支合并、luffy项目后台登陆注册页面分析引入
今日内容概要 git冲突解决 线上分支合并 登陆注册页面(引入) 手机号是否存在接口 腾讯云短信申请 内容详细 1.git冲突解决 1.1 多人在同一分支开发,出现冲突 # 先将前端项目也做上传到 g ...
- 微信小程序-06-详解介绍.js 逻辑层文件-注册页面
上一篇介绍的是 app.js 逻辑层文件中注册程序,对应的每个分页面都会有的 js 文件中 page() 函数注册页面 微信小程序-06-详解介绍.js 逻辑层文件-注册页面 宝典官方文档: http ...
- Python tkinter 实现简单登陆注册 基于B/S三层体系结构，实现用户身份验证
Python tkinter 实现简单登陆注册 最终效果 开始界面 注册 登陆 源码 login.py # encoding=utf-8 from tkinter import * from ...
- js简单的注册页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- AJAX实现简单的注册页面异步请求
p { margin: 0px; padding: 0px } AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通 ...
- 使用Html和ashx文件实现其简单的注册页面
记得上一次博客中实现的是其登录页面,其实学会了登录页面,注册页面自然就知道怎么写啦,都是一个意思的,但是今天不知道怎么个情况,写一个注册页面程序 中 一直在出错,大的问题小的问题一直出错,似乎是不在状 ...
- java 24 - 11 GUI之制作登陆注册页面
简单说说,懒得发了... 步骤: A:首先写出登陆注册需要用到类以及代码(IO流) B:然后创建登陆窗口和注册窗口 C:各个监听事件: a:登录窗口 1.重置:把2个文本框的内容全部清空 2.注册:关 ...
- javaweb 登陆注册页面
视图的数据修改,表中也修改引用工具类用<%@ page import=""%> <%@ page import="java.util.Date" ...
随机推荐
- C#linq计算总条数并去重复的写法
一,在实际需求中我们会存在选出了一个集合,而这时我们需要通过集合的某几个字段来计算重复,和统计重复的数量,这时我们可以用到linq来筛选和去重复. 二,如下代码: using System; usin ...
- Git 安装使用及基础命令
Git终端软件安装 1.下载windows上git终端,类似shell工具,下载地址:http://msysgit.github.io/ 2. 安装方法,打开文件,一路点击Next即可 3.安装完成, ...
- #1062 - Duplicate entry '0' for key 'PRIMARY'—— mysql的小问题
问题:# 1062 -重复输入“0”. 原因:我估计可能是数据表中主键这一栏已经有一个为“0”了,一般出现这种问题是以int类型的字段在输入时没有输如数据,而int类型默认值为“0”,而你之前第一条数 ...
- linux针对TCP和 UDP的调优
- [转]Tomcat9.0安装教程 Tomcat9.0环境变量配置教程
[转]Tomcat9.0安装教程 Tomcat9.0环境变量配置教程 [转]超详细MySQL安装及基本使用教程
- CSS3 Transform实例
移动translate <!doctype html> <html> <head> <meta charset="utf-8"> & ...
- go入门收集（转）
go mod 使用 原文地址: https://juejin.im/post/5c8e503a6fb9a070d878184a
- 第六周作业—N42-虚怀若谷
一.自建yum仓库,分别为网络源和本地源 [root@centos7 ~]# cd /etc/yum.repos.d/ [root@centos7 yum.repos.d]# mkdir bak #建 ...
- FastDFS整合普通Maven项目(四)
1.下载官方的源代码:https://codeload.github.com/happyfish100/fastdfs-client-java/zip/master 2.采用maven命令编译成jar ...
- BUUCTF |Fakebook
1.在注册后发现这个界面,猜测是不是存在注入点 http://654000be-ea72-4eae-8074-c6cf2798c9e9.node3.buuoj.cn/view.php?no=1and1 ...