完成登录与注册页面的前端

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

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

</head>
<body class="bg">
<div id="container">
    <div class="box">
        <h2 id="denglu">登录</h2>

        <div class="input_box">
            <input type="text" id="uname" placeholder="请输入用户名">
        </div>
        <div class="input_box">
            <input type="password" id="upass" placeholder="请输入密码">
        </div>
        <div class="error" id="error_box"><br></div>
        <div class="input_box">
            <button id="login" type="submit" onclick="fnLogin()">登录</button>
            <button id="cancel" type="cancel" onclick="fnLogin()">取消</button>
        </div>

    </div>
</body>
</html>

css

div{
    margin:0 auto;
    text-align:center;
    backgroup-color: gray;
}
*{
    margin: 0;
    padding: 0;
    font-family:"宋体";
    font-size: 20px;
}
.bg {
    background-image: url(http://bpic.588ku.com/back_pic/00/13/15/08564453d0190aa.jpg!ww800);
    background-repeat: no-repeat;
    background-size: 200%;
    height: 320px;
}
.box {
    border: 1px solid #cccccc;
    position: absolute;
    top: 42%;
    left: 50%;
    height: 400px;
    width: 400px;
    background: rgba(123, 180, 255, 0.93);
    margin-left: -195px;
    margin-top: -160px;

}

h2 {
    font-size: 16px;
    text-align: center;
    height: 46px;
    font-weight:normal;
    color:lightseagreen;
    line-height: 46px;
    backgroud:#98dbff;
    overflow: hidden;
    border-bottom:solid 1px #ddd;
}
#denglu{


    font-size: 32px;

}

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

input {
      font-size:18px;
    font-weight:bold;
}

button {
    align-content: center;
    font-family: 宋体;
    font-size: 30px;
    text-align: center;
    background: #2ecc22;
    height: 40px;
    width: 200px;
}

function fnLogin() {
    var oUname = document.getElementById("uname");
    var oUpass = document.getElementById("upass");
    var oError = document.getElementById("error_box");

    oError.innerHTML = "<br>"
    // uname
    if (oUname.value.length > 20 || oUname.value.length < 6) {
        oError.innerHTML = "用户名长度要求6-20位";
        return;
    } else if ((oUname.value.charCodeAt(0) >= 48) && (oUname.value.charCodeAt(0) <= 57)) {
        oError.innerHTML = "用户名首字母不能是数字";
        return;
    } else for (var i = 0; i < oUname.value.length; i++) {
        if ((oUname.value.charCodeAt(i) < 48) || (oUname.value.charCodeAt(i) > 57) && (oUname.value.charCodeAt(i) < 97) || (oUname.value.charCodeAt(i) > 122)) {
            oError.innerHTML = "用户名只能为字母或数字";
            return;
        }
    }

// upass
    if (oUpass.value.length > 20 || oUpass.value.length < 6) {
    oError.innerHTML = "密码长度要求6-20位哦";
    return;
    }
    window.alert("恭喜，用户登录成功！")
}

注册html

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

</head>
<body class="bg" style="text-align: center;>

    <div class="box" >
            <h2 id="zhuce">欢迎注册</h2>

        <div class="input_box">
            账号　     <input id="name" type="text" placeholder="请输入用户名">   </div><br>
        <div class="input_box">
            密码　     <input id="password" type="password" placeholder="请输入密码"></div><br>
         <div class="input_box">
            再输入     <input id="passwordagain" type="password" placeholder="请再次输入密码"></div><br>
        <div id="error_box"><br></div>
         <div class="ja">
            <button onclick="fnLogin()" >注册</button></div>
</div>
    </div>
</div>
</body>
</html>

css

div{
    margin:0 auto;
    text-align:center;
    backgroup-color: gray;
}
*{
    margin: 0;
    padding: 0;
    font-family:"宋体";
    font-size: 20px;
}
.bg {
    background-image: url(http://bpic.588ku.com/back_pic/00/13/15/08564453d0190aa.jpg!ww800);
    background-repeat: no-repeat;
    background-size: 200%;
    height: 320px;
}
.box {
    border: 1px solid #cc256a;
    position: absolute;
    top: 42%;
    left: 50%;
    height: 800px;
    width: 800px;
    background: rgba(123, 180, 255, 0.93);
    margin-left: -195px;
    margin-top: -160px;

}

h2 {
    font-size: 16px;
    text-align: center;
    height: 46px;
    font-weight:normal;
    color:lightseagreen;
    line-height: 46px;
    backgroud:#98dbff;
    overflow: hidden;
    border-bottom:solid 1px #ddd;
}
#denglu{


    font-size: 32px;

}

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

input {
      font-size:18px;
    font-weight:bold;
}

button {
    align-content: center;
    font-family: 宋体;
    font-size: 30px;
    text-align: center;
    background: #2ecc22;
    height: 40px;
    width: 200px;
}

function fnLogin() {
        var uname = document.getElementById("name")
        var uError = document.getElementById("error_box")
        var upassword = document.getElementById("password")
        var upasswordagain = document.getElementById("passwordagain")
        uError.innerHTML="<br>"
         if(uname.value.length<6 || uname.value.length >20){
        uError.innerHTML="用户名应为6到20字符";
        return;
    }else if ((uname.value.charCodeAt(0)>=48) && (uname.value.charCodeAt(0)<=57)){
        uError.innerHTML="第一位只能是字母";
        return;
    } else for (var i=0 ; i<uname.value.length;i++){
        if (uname.value.charCodeAt(i)<48 || (uname.value.charCodeAt(i)>57)&&(uname.value.charCodeAt(i)<97)|| uname.value.charCodeAt(i)>122){
            uError.innerHTML="用户名只能为数字或者字母";
            return;
        }
    }
    if(upassword.value.length<6 || upassword.value.length>12){
        uError.innerHTML="密码应为6到20字符";
        return;
    }
    if (upasswordagain.value!=upassword.value ) {
        uError.innerHTML = "重新输入你的密码";
        return;
    }

    window.alert("注册成功")
}

posted @ 2017-11-01 21:13 李海力学编程阅读(231) 评论(0) 收藏举报

刷新页面返回顶部

李海力

完成登录与注册页面的前端

公告