后台使⽤php，前台使⽤html,css,jquery,javascript实现登录注册
简单介绍⼀下注册和登录功能的实现
注册
注册的部分有注册⽤户名，秘密，确认密码，邮箱，电话号码，注册按钮和点击注册按钮完成注册.
前端部分要做的事情就是⽤户输⼊的信息是否正确，格式是否符合
当确定⽤户输⼊的信息正确后，客户端会将⽤户所输⼊的内容传给服务端.服务端得到的信息后会在进⾏
⼀次判断信息的格式是否符合要求,⽆误后将德奥信息与数据库中的信息做对⽐，如有重复则会提⽰前端该⽤户名,⼿机号，邮箱等已经被注册,⽆重复的信息则将信息存⼊数据库并提⽰前端注册完成.
注册的页⾯布局Html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="shortcut icon" href="../img/micon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<link rel="stylesheet" type="text/css" href="../css/regiter.css" />
<link rel="stylesheet" type="text/css" href="../css/lore.css" />
</head>
<body>
<div class="lore_box">
<div class="header">
<a href="#" class="logo">
</a>
</div>
<div class="from_box">
<form action="login.html" name="frm"οnsubmit='return checkAll()'>
<a href="#">注册Flyme账号</a>
<div><i>账号：</i><input type="text" placeholder="请输⼊账号"οnblur="checkUser(this)" name='username' />
<span>* ；账号中不能有数字，长度为4到16位</span></div><br/>
<div><i>密码：</i><input type="password" placeholder="请输⼊密码"οnblur="checkPass(this)" name='psd1' />
<span>* ；密码由数字字母下划线组成，长度6-16</span></div><br />
<div><i>确认密码：</i><input type="password" placeholder="确认密码"οnblur="checkPass2(this)" name='psd2' />      <span>*</span></div><br />
<div><i>邮箱：</i><input type="email" placeholder="请输⼊邮箱"οnblur="checkEma(this)" name='email' />
<span>*</span></div><br />
<div><i>⼿机号码：</i><input type="text" placeholder="请输⼊⼿机号"οnblur="checkPhone(this)" name='phone' />      <span>*</span></div><br />
<input type="submit" value="注册" id="sub" />
<p><a href="#">登录</a></p>
</form>
</div>
</div>
</body>
<script src="../js/utils.js"></script>
<script src="../js/cookie.js"></script>
<script src="../js/regiter.js"></script>
</html>
样式代码如下:
form{
position: absolute;
top: 10%;
right: 85px;
width: 510px;
height: 460px;
margin: 80px auto;
background: #fff;
padding: 30px 35px 0px 35px;
border-radius: 2px;
}
i{
display: inline-block;
width: 80px;
}
input{
width: 160px;
height: 30px;
}
span{
font-size: 14px;
color: #999;
}
a{
display: block;
font-size: 24px;
color: #387aff;
width: 200px;
margin: 20px auto;
}
#sub{
margin-left: 110px;
width: 80px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: #387aff;
color: #fff;
}
body,html{
width: 100%;
height: 100%;
}
.lore_box{
width: 100%;
height: 100%;
}
.lore_box .header{
width: 100%;
height: 68px;
background: #fff;
}
.logo{
display: inline-block;
margin: 28px 140px;
width: 110px;
height: 20px;
background:url(s/resources/uc/wlogin/base/images/base.png)-2px -4px no-repeat; }
.lore_box .from_box{
width: 100%;
height: 90%;
background:url(s/resources/uc/wlogin/member/images/banner.png)no-repeat; background-size: cover;
}
.lore_box p a{
float: left;
margin: 20px 0;
margin-left: 8px;
}
input{
padding-left: 10px;
border:0;
border: 1px solid silver;
border-radius: 2px;
}
input:focus{
border-color: blue;
}
js部分的逻辑代码如下:
let inputs = document.querySelectorAll('input');
let name, p1, p2, ema, phone1;
function mean(t, flag, info, intext){
let va = t.value;
if(flag){
}else{
if(va ==''){
}
}
}
function checkUser(t){
let reg =/^[^0-9]{4,16}$/;
let va = t.value;
st(va)){
name =true;
mean(t, name)
}else{
name =false;
let info ='账号';
mean(t, name, info)
}
}
function checkPass(t){
let reg =/^\w{6,16}$/;
let va = t.value;
st(va)){
p1 =true;
mean(t, p1)
}else{
p1 =false;
let info ='密码';
mean(t, p1, info)
}
}
function checkPass2(t){
let va = t.value;
let va1 = inputs[1].value;
p2 =true;
mean(t, p2)
}else{
p2 =false;
let intext ='* ；两次输⼊密码不⼀致'
let info ='确认密码';
mean(t, p2, info, intext)
}
}
function checkEma(t){
let reg =/^\w+@(qq|163|sina)\.(com|cn)()?$/;
let va = t.value ||'';
st(va)){
ema =true;
mean(t, ema)
}else{
ema =false;
jquery在线库
let intext ='* ；邮箱格式错误'
let info ='邮箱';
mean(t, ema, info, intext)
}
}
function checkPhone(t){
let reg =/^1[34578]\d{9}$/;
let va = t.value;
st(va)){
phone1 =true;
mean(t, phone1)
}else{
phone1 =false;
let intext ='* ；没有该⼿机号'
let info ='⼿机号';
mean(t, phone1, info, intext)
}
}
function checkAll(){
if(name && p1 && p2 && ema && phone1){
regiterfn()
async function regiterfn(){
let p2=await pAjax({
url:'../server/regiter.php',
data:{
username:inputs[0].value,
psd:inputs[1].value
}
})
if(p2=='⽤户名已存在'){
inputs[0].nextElementSibling.innerHTML='⽤户名已存在'    inputs[0].lor='red'
return false;
}else{
return true;
}
}
}else{
checkUser(inputs[0])
checkEma(inputs[3])
checkPass(inputs[1])
checkPass2(inputs[2])

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。