登录界面

完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括：

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="../static/css/login.css">
    <script src="../static/js/login.js"></script>


</head>
<body>
       <div class="box">
          <h2>登录</h2>

          <div class="input_box">
              账号：<input  id="username" type="text" placeholder="请输入用户名">
          </div>

          <div class="input_box">
              密码：<input  id="password" type="text" placeholder="请输入密码">
          </div>

          <div id="error_box"><br></div>
          <div>
              <button onclick="mulogin()">登录</button>
              <a href="regist.html"></a>
          </div>
      </div>

</body>
</html>

login.css

* {
    margin: 0;
    padding: 0;
    font-family: "华文楷体";
    font-size: 15px;
}

.box {
    width: 390px;
    height: 320px;
    border: solid 1px #ddd;
    background: white;
    position: absolute;
    left: 50%;
    top: 42%;
    margin-left: -195px;
    margin-top: -160px;
}

h2 {
    font-weight: normal;
    color: black;
    font-size: 32px;
    line-height: 46px;
    height: 46px;
    overflow: hidden;
    text-align: center;
    border-bottom: solid 1px #dddddd;
    background: white;
}

.input_box {
    width: 350px;
    height: 33px;
    padding-bottom: 15px;
    margin: 0 auto;
    overflow: hidden;
}

.input_box.input {
    align-self: center;
    width: 320px;
    height: 30px;
}
#username{
    width:300px;
    height: 35px;
}
#password{
    width:300px;
    height: 35px;
}
#error_box{
    font-size: 15px;
    padding-left: 23px;
    color: red;
}
button {
    align-content: center;
    font-family: 华文楷体;
    font-size: 28px;
    text-align: center;
    background: cornflowerblue;
    height: 40px;
    width: 390px;

}

login.js

        function mulogin() {
            var name=document.getElementById("username");
            var password=document.getElementById("password");
             var password1=document.getElementById("password");
            var error=document.getElementById("error_box");

            error.innerHTML="<br>";
            if(name.value.length<6 || name.value.length>20){
                error.innerHTML="用户名为6-20位";
                return;
            }else if(name.value.charCodeAt(0)>=48 && (name.value.charCodeAt(0)<=57)){
                error.innerHTML="首字母必须为字母";
                return;
            }else for( var i=0;i<name.value.length;i++){
                if((name.value.charCodeAt(i)<48 || name.value.charCodeAt(i)>57) && (name.value.charCodeAt(i)<97|| name.value.charCodeAt(i)>122)){
                    error.innerHTML="用户名只能是字母和数字";
                return;
                }
            }
            if(password.value.length<6 || password.value.length>20 ){
                error.innerHTML="密码为6-20位";
            }
             if(password!=password1){
         document.getElementById("error_box").innerHTML="两次密码不一致，请重新输入";
         return;

     }
            window.alert("登录成功!")
        }

注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="../static/css/login.css">
    <script src="../static/js/login.js"></script>


</head>
<body>
       <div class="box">
          <h2>注册</h2>

          <div class="input_box">
              账号：<input  id="username" type="text" placeholder="请输入用户名">
          </div>

          <div class="input_box">
              密码：<input  id="password" type="text" placeholder="请输入密码">
              验证：<input  id="password1" type="text" placeholder="请输入密码">
          </div>

          <div id="error_box"><br></div>
          <div>
              <button onclick="muregist()">注册</button>
          </div>
      </div>

</body>
</html>

 

posted on 2017-10-31 11:49  张木清  阅读(166)  评论(0)  编辑  收藏  举报

导航