JavaScript实现简易登录注册页面
本文实例为大家分享了JavaScript实现简易登录注册页面的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
<!-- <link rel="stylesheet" type="text/css" href="pageChange.css" /> -->
<!-- <script src="pageChange.js"></script> -->
</head>
<body>
<div class="control">
<div class="item">
<div class="active">登录</div>
<div>注册</div>
</div>
<div class="content">
<div style="display: block;" class="box1">
<p>账号</p>
<input type="text" placeholder="username" name="use2" />
<span></span>
<p>密码</p>
<input type="password" placeholder="password" name="use2" />
<span></span>
<br/>
<input type="submit" value="登录" />
</div>
<div class="box2">
<p>用户名</p>
<input type="text" placeholder="username" name="use1" />
<span>请输入以字母开头至少4位数用户名</span>
<p>密码</p>
<input type="password" placeholder="password" name="use1" />
<span>请输入至少六位数的密码</span>
<p>邮箱</p>
<input type="text" placeholder="email" name="use1" />
<span>请输入邮箱账号</span>
<br/>
<input type="submit" value="注册" />
</div>
</div>
</div>
</body>
</html>
<style>
* {
margin: 0;
padding: 0;
}
.error {
color: red;
font-size: 14px;
}
.cg {
color: greenyellow;
font-size: 14px;
}
body {
background: #f3f3f3;
}
.control {
width: 340px;
background: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
}
.item {
width: 340px;
height: 60px;
background: #eeeeee;
}
.item div {
width: 167px;
height: 60px;
display: inline-block;
color: black;
font-size: 18px;
text-align: center;
line-height: 60px;
cursor: pointer;
}
.content {
width: 100%;
}
.content div {
margin: 20px 30px;
display: none;
text-align: left;
}
p {
color: #4a4a4a;
margin-top: 30px;
margin-bottom: 6px;
font-size: 15px;
}
.content input[type="text"],
.content input[type="password"] {
width: 100%;
height: 40px;
border-radius: 3px;
border: 1px solid #adadad;
padding: 0 10px;
box-sizing: border-box;
}
.content input[type="submit"] {
margin-top: 40px;
width: 100%;
height: 40px;
border-radius: 5px;
color: white;
border: 1px solid #adadad;
background: #00dd60;
cursor: pointer;
letter-spacing: 4px;
margin-bottom: 40px;
}
.active {
background: white;
}
.item div:hover {
background: #f6f6f6;
}
</style>
<script>
window.onload = function () {
var item = document.querySelectorAll(".item");
var it = item[0].querySelectorAll("div")
var content = document.querySelectorAll(".content");
var con = content[0].querySelectorAll("div");
var na1 = document.querySelectorAll('[name="use1"]')
var na2 = document.querySelectorAll('[name="use2"]')
var span1 = document.querySelectorAll('.box2 span')
var span2 = document.querySelectorAll('.box1 span')
var zc = document.querySelector('[value="注册"]')
var dl = document.querySelector('[value="登录"]')
console.log(span2)
var userReg = /^[a-zA-Z][a-zA-Z0-9]{3,9}$/
var telReg = /^[0-9a-zA-Z].{4,14}$/
var emailReg = /(^[a-zA-Z]\w{5,17}@((126|163)\.com|yeah\.net)$)|(^[1-9]\d{4,10}@qq\.com$)/
for (let i = 0; i < it.length; i++) {
it[i].onclick = function () {
for (let j = 0; j < it.length; j++) {
it[j].className = '';
con[j].style.display = "none";
}
this.className = "active";
it[i].index = i;
con[i].style.display = "block";
}
}
var flag = false
// 封装
function cf(trr, srnr, index, str, str1) {
var a1 = trr.test(srnr)
if (!a1) {
index.className = 'error'
index.innerText = str
return true
} else {
index.className = 'cg'
index.innerText = str1
return false
}
}
// 正则验证
na1[0].oninput = () => cf(userReg, na1[0].value, span1[0], 'x 用户名不符合规范', '√ 通过验证')
na1[1].oninput = () => cf(telReg, na1[1].value, span1[1], 'x 密码不符合规范', '√ 通过验证')
na1[2].oninput = () => cf(emailReg, na1[2].value, span1[2], 'x 邮箱书写不符合规范', '√ 通过验证')
var arr=[]
zc.onclick = () => {
flag = true
if (na1[0].value === '') {
span1[0].className = 'error'
return flag = false
}
else if (na1[1].value === '') {
span1[1].className = 'error'
return flag = false
}
else if (na1[2].value === '' || span1[2].className == 'error') {
span1[2].className = 'error'
return flag = false
} else {
if (flag && na1[2].className != 'error') {
// for (let i = 0; i < na1.length; i++) {
// // arr[i]=arr.push(na1[i].)
// console.log(arr[i])
// na1[i].value = ''
// }
alert('注册成功')
}
}
}
dl.onclick = function () {
if (na1[0].value != na2[0].value || na1[0].value == '') {
span2[0].className = 'error'
span2[0].innerText = '用户名不一致'
} else {
span2[0].innerText = ''
span2[0].className = ''
}
if (na1[1].value === '' || na1[1].value != na2[1].value) {
span2[1].className = 'error'
span2[1].innerText = '密码错误'
} else {
span2[1].innerText = ''
span2[1].className = ''
}
if (flag) {
alert('登录成功')
}
else if(na1[0].value != na2[0].value&& na1[1].value != na2[1].value) {
alert('账号不存在')
}
}
}
</script>
效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)
下面通过通过图文并茂的方式给大家介绍JavaWeb实现用户登录注册功能实例代码,一起看看吧. 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp负责数据显示,javabean负责封装数据. Servlet+JSP+JavaBean模式程序各个模块之间层次清晰,web开发推荐采用此种模式. 这里以一个最常用的用户登录注册程序来讲解Servlet+JS
-
使用JSP实现简单的用户登录注册页面示例代码解析
实验要求: 将实验2中的系统用户登录和注册页面改为JSP页面,并部署自己的Web应用于Tomcat服务器中 具体要求: 完成登录JSP页面设计和注册页面设计 在登录页面表单中使用request对象获取用户信息,建立新的JSP页面完成登录验证(用户名和密码自己指定即可). 验证结果显示(如登录成功/用户名密码错误,可以使用JavaScript,也可以使用新的JSP页面). 在注册页面表单中使用request对象获取用户注册信息(注册项目由自己指定),在新的JSP页面显示用户注册信息,并提示注册成功
-
Servlet+JavaBean+JSP打造Java Web注册与登录功能
采用Java Web所实现的MVC结构图如下,其中控制器部分采用Servlet来实现,模型部分采用JavaBean来实现,而大部分的视图采用Jsp页面来实现. 思想基础 JSP+JavaBean两层结构工作原理应该是比较熟悉的,也比较好理解. 但是有一点必须要清楚就是用户通过浏览器来发送网页的请求,此请求到达服务器后在服务器端查找对应的网页,如果是首次请求(第二次就不用解释执行了),对于JSP来说要生成Servlet,然后通过Servlet引擎来执行 Servlet,把调用JavaBean的结果
-
JSP实现用户登录、注册和退出功能
本文讲述使用JSP实现用户登录,包括用户登录.注册和退出功能等. 1.系统用例图 2.页面流程图 3.数据库设计 本例使用oracle数据库 创建用户表 包括id,username,password和email,共4个字段 -- Create table create table P_USER ( id VARCHAR2(50) not null, username VARCHAR2(20), password VARCHAR2(20), email VARCHAR2(50) ) tablesp
-
node.js实现登录注册页面
本文实例为大家分享了node.js登录注册页面展示的具体代码,供大家参考,具体内容如下 首先需要新建四个文件 一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>regist</title> </head> <
-
JSP+MySQL实现网站的登录与注册小案例
为了练手,我就自己试着做了一个网站的登录与注册的小案例.由于没有做美化处理,所以界面并不是很好看. 网站实现的功能如下: •用户首次注册功能 •用户登录功能 下面我将会分模块展示 注册模块 首先需要一个注册界面,如下register.jsp: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOC
-
原生js验证简洁注册登录页面
序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 1 sign_up.html 注册表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sign-up</title> <link rel="stylesheet" href="css
-
vue.js实现用户评论、登录、注册、及修改信息功能
vue.js实现用户评论.登录.注册.及修改用户部分信息功能代码.效果图如下: 登入后: 登入前: 登录框: 注册框: html代码部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>index</title> <link rel="stylesheet" href=&quo
-
js实现登录注册框手机号和验证码校验（前端部分）
开发的很多场景中都会用到手机号的校验和验证码的校验,具体实现如下 <div> <input type="text" name="phonenumber" placeholder="请输入您的手机号码" /> <input type="text" name="verify" placeholder="请输入验证码" /><input type=&q
-
js实现登录与注册界面
完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括: 用户名6-12位 首字母不能是数字 只能包含字母和数字 密码6-12位 注册页两次密码是否一致 html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎你,请先登陆!</title> <script type="