源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
#wai{
width:1500px;
height:500px;
border:black 2px solid;
position: relative;
}
#left{
position: absolute;
top:0;
left:0;
background-image: url("images/20190815113419267.jpg");
width: 1000px;
height: 500px;
border:black 2px solid;
text-align: center;
opacity: 0.7;
}
input{
background-color:transparent;
border:none;
border-bottom:orchid 2px solid;
outline: none;
}
#right{
opacity: 0.7;
background-image: url("images/zcbj.jpg");
position: absolute;
top: 0;
right: 0;
width: 500px;
height:500px;
text-align: center;
}
a{
color:darkgray
}
</style>
<body>
<div id="wai">
<div id="left">
<form action="">
<h4>立即注册</h4>
<p>邮箱</p><br>
<input type="text" id="yx"><br>
<p>用户名</p><br>
<input type="text" id="un"><br>
<p>性别</p><br>
<input type="radio" name="xb">男<input type="radio" name="xb">女<br>
<p>头像</p><br>
<input type="file">
<p>密码</p><br>
<input type="password" id="pwd"><br>
<p>确认密码</p>
<input type="password" id="repwd"><br>
<button id="zc"><a href="#" οnclick="zce()"> 注册</a></button>
</form>
</div>
<div id="right">
<br><br><br><br><br><br>
<p>已有账号？有账号就登陆吧，好久不见</p><br><br><br><br><br><br><br><br><br>
<a href="zh1.html">登录</a>
</div>
</div>
</body>
<script>
function Em(emm){
var em=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/;
var bac=em.test(emm);
return bac;
}
function Un(un){
var uu= /^[a-zA-Z0-9_-]{1,5}$/;
var bac=uu.test(un) ;
return bac;
}
function pw(pwd){
var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
var jg=reg.test(pwd);
return jg;
}
function zce(){
var yx=document.getElementById("yx").value;
var mm=document.getElementById("pwd").value;
var remm=document.getElementById("repwd").value;
var yf=document.getElementById("un").value;
var yxq=Em(yx);
var mmq=pw(mm);
var yfq=Un(yf)
if(!yxq){
alert("邮箱输入错误")
}
else{
localStorage.setItem("邮箱",yx);
}
if(!yfq){
alert("用户名最多五位")
}
else{
localStorage.setItem("用户名",yf);
}
if(!mmq){
alert("密码至少为6位且由数字语字母组成")
}
if(remm==mm){
localStorage.setItem("密码",mm)
}
else{
alert("密码与原密码不一致")
}
return false;
}
</script>
</html>
登录源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin:0;
padding:0;
}
#bj{
position: relative;
margin:60px auto;
height:400px;
width:1220px;
background-image:url("images/bj.png");
}
#zm{
background-color: brown;
position: relative;
left:407px;
width: 407px;
height:400px;
border-radius: 50%;
opacity: 0.8;
text-align: center;
}
#yx{
background-color:transparent;
border:none;
border-bottom:orchid 2px solid;
outline: none;
}
#pwd{
background-color:transparent;
border:none;
border-bottom:orchid 2px solid;
outline: none;
}
button{
background-color: yellowgreen;
color: honeydew;
}
</style>
<body>
<div id="bj">
<div id="zm">
<form action="">
<br><br><br><br><br>
<a href="#">立即登录</a><br>
<p>邮箱</p><br>
<input type="text" id="yx"><br>
<p>密码</p><br>
<input type="password" id="pwd"><br>
<a href="#">忘记密码？</a><br>
<button><a href="#" id="onload" οnclick="go()"> 登录</a></button> <button><a href="注册.html"> 注册</a></button>
</form>
</div>
</div>
<script>
function Em(emm){
var em=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/;
var bac=em.test(emm);
return bac;
}
function pw(pwd){
var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
var jg=reg.test(pwd);
return jg;
}
function go(){
var y=document.getElementById("yx").value;
var p=document.getElementById("pwd").value;
var w=pw(p)
var x=Em(y);
console.log(y)
var a=localStorage.getItem("邮箱");
var b=localStorage.getItem("密码");
console.log(a);
if(!x){
alert("邮箱输入错误")
}
if(!w){
alert("密码错误");
}
if(a==y){
if(b==p){
document.getElementById("onload").href="相册.html";
}
}
else{
alert("请重新输入信息")
}
return false;
}
</script>
</body>
</html>
该篇文章只要求看懂代码
扫一扫
583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
