码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-10-31 22:21:21      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:html   back   lan   ntb   页面   body   cannot   bit   inpu   

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

 

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

</head>
<body>

<div class="aa" >
    <div class="login" ><h2>LOGIN</h2></div>
    <div class="aa1" >
        Username:<input id="name" type="text"placeholder="请输入用户名"><br>
        Password:<input id="password" type="password"placeholder="请输入密码"><br>
        </div>
        <div id="error_box"><br></div>
      <div class="aa2" >
         <button onclick="myLogin()">Login</button>
         <button type="button" onclick=window.alert("是否取消登录!")>Cancel</button>


    </div>
</body>
</html>
div{
    margin:0 auto;
    text-align:center;
    backgroup-color:blue
}
.aa{
    width:380px;
    height:230px;
    background-color: gold;

    margin-top:200px;
}
.login{
    font-size: 30px;
    color: black;
    font-family:幼圆;

}
.aa1{
    font-size:30px;
    font-weight:bold;
    color: red;
    font-family:幼圆;
 }
.aa2{
    width:150px;
    height:60px;
    boder-style:hidden;
}

.design{
    font-size:10px;
    color:yellowgreen;
}
#error_box{
    color:red;
}
function myLogin(){
            var uName=document.getElementById("name");
            var uError=document.getElementById("error_box");
            var upass = document.getElementById("password");
            uError.innerHTML = "<br>"
            //uname
            if(uName.value.length>12 || uName.value.length<6){
                uError.innerHTML="Username 6-12 bits";
                return;
            }else if((uName.value.charCodeAt(0)>=48)&& uName.value.charCodeAt(0)<=57){
                uError.innerHTML="The first letter cannot be numeric";
                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 = "only letter or number.";
                    return;
                }
            }


            if(upass.value.length>12 || upass.value.length<6){
                uError.innerHTML="password 6-12 bits";
                return;
            }
            window.alert("登陆成功 !")

        }

技术分享技术分享技术分享技术分享技术分享

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

标签:html   back   lan   ntb   页面   body   cannot   bit   inpu   

原文地址:http://www.cnblogs.com/marsk/p/7763864.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!