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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

#登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎您的登录</title>
    <link href="../static/css/js31.css" rel="stylesheet" type="text/css">
    <script src="../static/js/js31.js"></script>
</head>
<body>
    <div class="box">
            <h2>登录页面</h2>
            <div class="input_box">
               用户名： <input id="uname" type="text" placeholder="请输入用户名">
        </div>
             <div class="input_box">
                密码： <input id="upass" type="password" placeholder="请输入密码">
             </div>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button onclick="fnLogin()">登录</button>
            <button onclick=window.alert("此页面询问您是否要离开：您输入的数据可能不会被保存")>取消</button></div>

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

　　#注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link href="../static/css/js31.css" rel="stylesheet" type="text/css">
    <script src="../static/js/js31.js"></script>
</head>
<body>
    <div class="box">
            <h2>注册页面</h2>
            <div class="input_box">
               输入用户名： <input id="uname" type="text" placeholder="请输入用户名">
        </div>
             <div class="input_box">
                输入密码： <input id="upass" type="password" placeholder="请输入密码">
             </div>
            <div class="input_box">
                确认密码： <input id="checkpass" type="password" placeholder="请确认密码">
             </div>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button onclick="fnLogin()">登录</button>
            <button onclick=window.alert("此页面询问您是否要离开：您输入的数据可能不会被保存")>取消</button></div>

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

　　#CSS

*{
    margin: 0;
    padding: 0;
    font-family: 微软雅黑;
    font-size: 12px;
}
.box{
    width: 390px;
    height: 320px;
    border: solid 1px #ddd;
    background: #FFF;
    position: absolute;
    left: 50%;
    top: 42%;
    margin-left: -195px;
    margin-top: -160px;
}
.box h2{
    font-weight: normal;
    color: #666;
    font-size: 16px;
    line-height: 46px;
    height: 46px;
    overflow: hidden;
    text-align: center;
    border-bottom: solid 1px #ddd;
    background: #f7f7f7;
}
.input_box{
    margin:35px;
    text-align:center;
    overflow: hidden;


}
.error_box{
    color: black;

}

　　#JS

function fnLogin() {
    var oUname=document.getElementById("uname");
    var oUpass=document.getElementById("upass");
    var oError=document.getElementById("error_box");
    var oCheckpass = document.getElementById("checkpass");
    oError.innerHTML="<br>"
    if(oUname.value.length<6||oUname.value.length>12){
        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;
        }
    }
    if (oUpass.value.length<6||oUpass.value.length>12){
        oError.innerHTML="密码的长度:6-20位";
        return;
    }
    if(oCheckpass.value!=oUpass.value){
        oError.innerHTML="输入密码不一致。" ;
        return;
    }else if(oCheckpass.value==""){
        oError.innerHTML="未确认密码。";
        return;
    }
    window.alert("登录成功！")
}

　　

      

 

posted on 2017-11-01 18:51  072苏喜虹  阅读(294)  评论(0)    收藏  举报

导航