仿爱购网（登录）html+css+JS

主要在于添加正则表达式对用户的用户名及密码进行限制

注册页面相差不大，不过需要建一个数组保存注册的账号。

html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>爱购登录</title>
  <link rel="stylesheet" type="text/css" href="css/dl_style.css"/>
</head>
<body>
  <div class="wraper">
   <div class="row_one">
    <img src="img/logo.png" alt="" />

    <div class="imgright2 imgright"></div>
    <div class="imgright3 imgright"></div>
    <div class="imgright1 imgright"></div>
   </div>
   <div class="row_two">
    
    <div class="input">
     <form action="">
      <div class="form1">
       <div class="dlag">登录爱购</div>
       <span class="zc">还没有爱购账号？<a href="zhuce.html" class="zczc">在此注册</a></span>
      </div>

      <div id="form2">
       <p id="dts">用户名或密码错误</p>
       <font id="dts2">验证码错误</font>
       <input type="text" placeholder="请输入已注册的账号" id="dyhm"/>
      </div>
      <div class="form3">
       <input type="password" placeholder="请输入密码" id="dmm"/>
      </div>
      <div class="form4">

       <input type="text" placeholder="验证码" id="dyzm"/> <img src="img/code.jpg" alt="" class="code"/>
      </div>
      <div class="form5">
       <input type="checkbox" />七天免登陆
      </div>
      <div class="form6">
       <button id="ddl" type="button">登录</button>
      </div>
     </form>
    </div>
   </div>
   <div class="row_three">
    <a href="" class="xz">关于爱购</a>
    <a href="" class="xz">合作伙伴</a>
    <a href="" class="xz">营销中心</a>
    <a href="" class="xz">廉正举报</a>
    <a href="" class="xz">联系客服</a>
    <a href="" class="xz">开发平台</a>
    <a href="" class="xz">诚征英才</a>
    <a href="" class="xz">联系我们</a>
    <a href="" class="xz">网站地图</a>
    <a href="" class="xz">知识产权</a>|
    <a href="" class="xzh" id="qrmm">©2018-2020 igo.com版权所有</a>
   </div>
  </div>
  <script type="text/javascript" src="js/zhuce.js" charset="UTF-8"></script>
</body>
</html>

css：

@import url("reset.css");
.wraper{
width: 1440px;
height: auto;
margin: 0 auto;
}
/*第一行*/
.row_one{
height: 105px;
/*border: 1px solid #000;*/
}
.imgright{
width: 140px;
height: 35px;
background-image:url(../img/login-icon.png);
float: right;
margin: 30px 20px 0 0;
}
.imgright1{
background-position: -10px -39px;
}
.imgright2{
background-position: -10px -78px;
}
.imgright3{
background-position: -10px -114px;
}
/*第一行结束*/
/*第二行*/
.row_two{
width: 1440;
height: 600px;
background-image: url(../img/login-bg.jpg);
background-position: -240px;
position: relative;
}

.input{
width: 360px;
height: 364px;
/*border: 1px solid #000;*/
/*margin: -977px 100px;*/
position: absolute;
right: 105px;
top: 100px;
background-color: #fff;
box-shadow: 0px 3px 5px #ccc;
}
.form1{
/*border: 1px solid #000;*/
}
.dlag{
/*border: 1px solid #000;*/
font-size: 24px;
float: left;
color: #b41e23;
/*font-family: "宋体";*/
font-weight: 700;
margin: 22px 0 0 20px ;
}
.zc{
float: right;
font-size: 12px;
margin: 30px 20px 0 0;
}
.zczc{
color:#b41e23 ;
}
#dts{
font-size: 12px;
position: absolute;
top:61px;
right: 22px;
display: none;
color: #f00;
}
#dts2{
font-size: 12px;
position: absolute;
top:61px;
right: 22px;
display: none;
color: #f00;
}
#form2 input{
width: 316px;
height: 42px;
margin: 25px 20px 0 20px;
font-size: 15px;
}
.form3 input{
width: 316px;
height: 42px;
margin: 20px 20px 0 20px;
font-size: 15px;
}
.form4 input{
width: 192px;
height: 42px;
margin: 20px 15px 0 20px;
font-size: 15px;

}

.form4{
position: relative;
}
.code{
float: right;
/*margin: 20px 0px 0 0;*/
position: absolute;
top: 20px;

}
.form5{
font-size: 12px;
margin: 20px 0 0 20px;
}
.form6 #ddl{
width: 316px;
height: 42px;
margin: 20px 15px 0 20px;
font-size: 15px;
font-weight: 700;
background-color: #b41e23;
color: #fff;
}
/*第二行结束*/
/*第三行*/
.row_three{
height: 58px;
font-size: 12px;
padding-top: 25px;
text-align: center;

}
.xz{
margin: 0 10px 0 5px;
}
.xzh{
margin: 0 0 0 20px;
}

JS：

var reg = /^[a-zA-Z0-9]{6,12}$/g; var usrname = ["aigou01", "aigou02", "aigou03", "aigou04"]; var passwd = ["123456", "234567", "345678", "456789"];

   ddl.onclick = dlo;

   function dlo() {
   var flag = 0;
   for(var i = 0; i < usrname.length; i++) {
    if(dyhm.value == usrname[i] && dmm.value == passwd[i]) {
     flag = 1;
     break;
    }

   }

   if(flag == 0 && dyzm.value == "S13T") {
    dts.style.display = "block";
    dts2.style.display = "none";
   } else if(dyzm.value != "S13T") {
    dts2.style.display = "inline";
    dts.style.display = "none";
   } else if(flag == 1 && dyzm.value == "S13T") {
    dts.style.display = "none";
    dts2.style.display = "none";
    top.location='shouye.html';
   }

  }

仿爱购网（登录）html+css+JS

猜你喜欢