首页 > 代码库 > html：5 注册登录
html：5 注册登录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>福特BOOM!BOOM!BOOM!</title>
<link rel="stylesheet" href="http://www.mamicode.com/base.css">
<link rel="stylesheet" href="http://www.mamicode.com/index.css">
</head>
<body>
<div class="w">
<div class="da">
<div class="all">
<ul>
<li class="dl"><a href="http://www.mamicode.com/#">登录</a></li>
<li class="zc"><a href="http://www.mamicode.com/#">注册</a></li>
</ul>
</div>
<!-- 登录界面部分 -->
<div class="DL">
<div class="toux"></div>
<div class="one"><label for="">用户名 </label><input type="text" id="user"><p>可使用数字，字母,不能超过16位 </p></div>
<div class="two"><label for="">密码 </label><input type="password" id="mima"><p>6~16个字符，区分大小写</p></div>
<div class="three"><a href="http://www.mamicode.com/#">登 录</a></div>
</div>
<!-- 注册界面部分 -->
<div class="ZC">
<div class="top">
<ul>
<li><a href="http://www.mamicode.com/#">注册字母邮箱</a></li>
<li><a href="http://www.mamicode.com/#">注册手机号码邮箱</a></li>
<li><a href="http://www.mamicode.com/#">注册VIP邮箱</a></li>
</ul>
</div>
<div class="DZ"><label for="">邮箱地址 </label><input type="text" id="dizhi"><p>6~18个字符，可使用字母、数字，需以字母开头</p></div>
<div class="MM"><label for="">输入密码 </label><input type="password" id="mima1"><p>6~16个字符，区分大小写</p></div>
<div class="QRMM"><label for="">确认密码 </label><input type="password" id="qrmima"><p>请再次填写密码</p></div>
<div class="SJHM"><label for="">手机号码 </label><input type="text" id="sjhaoma"><p>忘记密码时，可以通过该手机号码快速找回密码</p></div>
<div class="XB">
<span>性别</span>
<input type="radio" checked name="1">男
<input type="radio" name="1">女
</div>
<div class="SR"><label for="">出生年月</label><input type="text" id="csny"><p>2017-01-01格式</p></div>
<div class="ZC1"><a class="lijizc" href="http://www.mamicode.com/#">立即注册</a>
<a class="fanhui">返回登录</a>
</div>
</div>
</div>
<script>
// 登录JS 正则部分
var users = document.querySelector("#user");
var p1 = document.querySelector("p");
var a;
var b;
var c;
var d;
var e;
users.onkeyup=function () {
var zhengze =/^[a-zA-Z]\d{15}$/;
if(!this.value){
p1.innerText="可使用数字,字母,不能超过16位 "
}else if (zhengze.test(this.value)){
p1.innerText = "X"
} else {
p1.innerText="√";
d=1;
}
};
var mima3=document.querySelector("#mima")
var mimap=document.querySelector(".MM p");
var mmzhengze1=/^\w{5,15}$/
mima3.onkeyup=function () {
if (mmzhengze1.test(this.value)){
mimap.innerText="下一步"
e=1;
}else{
mimap.innerText="格式不对，睁大眼睛看仔细点"
}
}
// 注册JS 正则部分
var dizhi = document.querySelector("#dizhi");
var p = document.querySelector(".DZ p");
dizhi.onkeyup=function () {
var zhengze =/^[a-zA-Z]\w{5,17}$/;
if(!this.value){
p.innerText="6~18个字符，可使用字母、数字、下划线，需以字母开头"
}else if (zhengze.test(this.value)){
p.innerText = "下一步"
a=1;
} else {
p.innerText = "瞪大眼睛仔细看要求"
}
};
// 注册密码部分
var mima =document.querySelector("#mima1");
var pp=document.querySelector(".MM p")
var zhengze1=/^\w{5,15}$/
mima.onkeyup=function () {
if (zhengze1.test(this.value)){
pp.innerText="下一步"
b=1;
}else{
pp.innerText="格式不对，睁大眼睛看仔细点"
}
}
var qrmima =document.querySelector("#qrmima");
var ppp=document.querySelector(".QRMM p")
qrmima.onkeyup=function () {
if (this.value=http://www.mamicode.com/=mima.value){
ppp.innerText="下一步"
c=1;
}else{
ppp.innerText="两次密码不一样，请认真核对后再输"
}
}
var sjhaoma =document.querySelector("#sjhaoma")
var pppp=document.querySelector(".SJHM p")
sjhaoma.onkeyup=function(){
var zhengze3=/^[1][358][0-9]{9}$/
if (zhengze3.test(this.value)){
pppp.innerText="下一步"
}else{
pppp.innerText="该手机号码为空号"
}
}
var SR =document.querySelector("#csny");
var pp1=document.querySelector(".SR p")
SR.onkeyup=function () {
var zhengze1=/^[\d]{4}[-\ ][\d]{1,2}[-\ ][\d]{1,2}$/
if (zhengze1.test(this.value)){
pp1.innerText="下一步"
}else{
pp1.innerText="格式不对，睁大眼睛看仔细点"
}
}
// 点击登录 弹出登录界面
var all = document.querySelector(".DL");
var denglu = document.querySelector(".dl");
denglu.onclick = function(){
all.style.display = "block";
all1.style.display ="none";
}
// 点击注册 弹出注册界面\
var fh=document.querySelector("a.fanhui")
var all1 = document.querySelector(".ZC");
var zhuce = document.querySelector(".zc");
zhuce.onclick = function(){
all1.style.display ="block";
all.style.display = "none";
}
fh.onclick=function(){
all1.style.display="none";
all.style.display = "block";
}
var all = document.querySelector(".DL");
var all1 = document.querySelector(".ZC");
var boss = document.querySelector(".da");
var denglu = document.querySelector(".dl");
var zhuce = document.querySelector(".zc");
boss.onclick = function(){
boss.style.display = "block";
}
// 下面是链接数据库部分登陆部分
var btn=document.querySelector(".three a");
btn.onclick=function(){
if(d==1&&e==1){
var dl=new XMLHttpRequest();
dl.open("post","http://192.168.3.27/archives/index.php")
dl.setRequestHeader("content-Type", "application/x-www-form-urlencoded");
dl.send("userName="+users.value+"&passWord="+mima3.value);
dl.onreadystatechange=function(){
if(dl.readyState==4){
console.log("请求完成");
console.log(JSON.parse(dl.responseText));
var a=JSON.parse(dl.responseText)
console.log(a.responseDesc)
if(a.responseCode==0){
window.location.href="file:///C:/Users/Administrator/Desktop/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/%E8%B4%9D%E6%B2%83%E5%AD%A6%E4%B9%A0/4.18/%E4%BD%9B%E7%9A%84%E5%95%A5%E5%90%83/%E6%9F%A5%E8%AF%A2%E9%83%A8%E5%88%86.html";
}
}
}
}else{
alert("请输入账号密码")
}
}
// 下面是链接数据库部分注册部分
var btn1=document.querySelector("a.lijizc");
btn1.onclick=function(){
if(a==1&&b==1&&c==1){
var zc=new XMLHttpRequest();
zc.open("post","http://192.168.3.27/archives/register.php")
// 请求头
zc.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
zc.send("userName="+dizhi.value+"&passWord="+mima1.value);
zc.onreadystatechange=function(){
if(zc.readyState==4){
console.log("请求完成");
console.log(zc.responseText);
console.log(JSON.parse(zc.responseText));
}
}
}
else {
alert("输入的格式有误")
}
}
// function setCookie(c_name,value,expiredays)
// {
// var exdate=new Date()
// exdate.setDate(exdate.getDate()+expiredays)
// document.cookie=c_name+ "=" +escape(value)+
// ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
// }
// setCookie("userName",55,265)
// function getCookie(c_name)
// {
// if (document.cookie.length>0)
// {
// c_start=document.cookie.indexOf(c_name + "=")
// if (c_start!=-1)
// {
// c_start=c_start + c_name.length+1
// c_end=document.cookie.indexOf(";",c_start)
// if (c_end==-1) c_end=document.cookie.length
// return unescape(document.cookie.substring(c_start,c_end))
// }
// }
// return "11"
// }
// console.log(getCookie())
</script>
</body>
</html>
html：5 注册登录