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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

1.登录

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

</head>

<body>
 <div class="box">
     <h2 class="d">登录</h2>
     <div class="input_box">
            <input style="background-color: deepskyblue;" id="uname" type="text" placeholder="请输入用户名">
        </div>
        <br>
        <div class="input_box">
            <input style="background-color: deepskyblue;" id="upass" type="password" placeholder="请输入密码">
        </div>
        <br>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button class="dl" onclick="fnLogin()">enter</button>

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

.d
{ font-size: 22px;
    padding-left: 40px;
    background:none;
    margin-right: 20px;
    color: #9932CC    ;
}
.box{
 align-content: center;
    background-color:#BBFFEE;height:250px;width:400px;float:left;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    border: 1px solid #ccc;
    width: 340px;

}
.input_box{
   width: 325px;
    height: 40px;
    padding-left: 5px;
    padding-right: 5px;
 border: 1px #BBFFEE solid;
    border-radius: 4px;
    background: none;
    line-height: 40px;
    font-size: 14px;
    color: #6699FF;
    vertical-align: middle;

}
.dl
{
text-align: center;
    color: #9932CC;
    background: deepskyblue;
    width: 50%;
    padding: 9px 18px;
    font-size: 18px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
}
.body {
    background-color: burlywood;
}

function fnLogin() {
        var oUname=document.getElementById("uname")
        var oUpass=document.getElementById("upass");
        var oError=document.getElementById("error_box")
        oError.innerHTML="<br>"
        if(oUname.value.length<6|| oUname.value.length > 20){
            oError.innerHTML="用户名至少6-20位"
            return;
        }else if((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){
            oError.innerHTML="first.number."
            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 = "only letter or number.";
                return;
            }
        }
        if(oUpass.value.length<6|| oUpass.value.length > 20){
            oError.innerHTML="密码至少6-20位"
            return;
        }
        if((oUname.value.length < 6 || oUname.value.length > 20) && (oUpass.value.length < 6 || oUpass.value.length > 20)){
            oError.innerHTML="用户名密码至少6-20位"
            return;
        }
        window.alert("登录成功！")
    }

2.注册

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


</head>

<body>
 <div class="box">
     <h2 class="d">注册</h2>
     <div class="input_box">
            <input style="background-color: deepskyblue;" id="uname" type="text" placeholder="请输入你的昵称">
        </div>
        <br>
     <div class="input_box">
            <input style="background-color: deepskyblue;" id="uname" type="text" placeholder="请输入你的密码">
        </div>
        <br>
        <div class="input_box">
            <input style="background-color: deepskyblue;" id="upass" type="password" placeholder="请再输入密码">
        </div>
        <br>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button class="dl" onclick="fnLogin()">注册</button>

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

.d
{ font-size: 22px;
    padding-left: 40px;
    background:none;
    margin-right: 20px;
    color: #9932CC    ;
}
.box{
 align-content: center;
    background-color:#BBFFEE;height:250px;width:400px;float:left;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    border: 1px solid #ccc;
    width: 340px;

}
.input_box{
   width: 325px;
    height: 40px;
    padding-left: 5px;
    padding-right: 5px;
 border: 1px #BBFFEE solid;
    border-radius: 4px;
    background: none;
    line-height: 40px;
    font-size: 14px;
    color: #6699FF;
    vertical-align: middle;

}
.dl
{
text-align: center;
    color: #9932CC;
    background: deepskyblue;
    width: 50%;
    padding: 9px 18px;
    font-size: 18px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
}
.body {
    background-color: burlywood;
}

function tnlogin() {
    var oUname = document.getElementById("uname")
    var oError = document.getElementById("error_box")
    var oUpass = document.getElementById("upass")
    var oUpass1 = document.getElementById("upass1")

    oError.innerHTML = "<br>"
    if (oUname.value.length < 6 || oUname.value.length > 20) {
        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;
        }
    }
    // oUpass
    if (oUpass.value.length > 20 || oUpass.value.length < 6) {
        oError.innerHTML = "密码必须在6-20之间";
        return;
    } else if (oUpass.value!= oUpass1.value) {
        oError.innerHTML = "两次密码不一致"
        return;
    }
    window.alert("注册成功！")
}

posted on 2017-11-01 20:56 020吴惠琳阅读(213) 评论(0) 收藏举报

刷新页面返回顶部

..L

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

导航

公告