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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>

    <script src="../static/js/wr.js"></script>

    <link href="../static/css/wr.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box">
    <h2>登录</h2>
    <div class="input-box">
        <input type="text" name="firstname" placeholder="输入用户名"><br>
         </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>
</body>
</html>
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 = "name: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="用户名只能包括字母和数字";
             return;
              }
    }


    //upass
    if(oUpass.value.length>20 || oUpass.value.length <6){
        oError.innerHTML="password:6-20";
        return;
    }
    window.alert("登录成功")
}
*{
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
    font-size: 12px;
}
.box{
    width: 390px;
    height: 320px;
    border: salmon;
    background:seashell;
    position: absolute;
    left: 50%;
    top: 42%;
    margin-left: -195px;
    margin-top: -160px;
}

 

posted @ 2017-11-01 18:14  092曹馨文  阅读(152)  评论(0)  编辑  收藏  举报