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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

 

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="../static/css/js23.css" rel="stylesheet" type="text/css">
    <script src="../static/js/js23.js"></script>
</head>
<body>
    <div class="box">
        <a class="one" href="login.html">登录</a>
        &nbsp;<b>·</b>&nbsp;
        <a class="one"href="register.html">注册</a>
         <div class="input_box">
             <input type="text" id="uname" placeholder="请输入用户名">
         </div>
         <div class="input_box">
             <input type="password" id="upass" placeholder="请输入密码">
         </div>
         <div id="error_box"><br></div>
         <div class="input_box">
             <button id="login" onclick="myLogin()">Login </button>


         </div>
    </div>
</body>
</html>
 function myLogin() {
        var oUname = document.getElementById("uname");
        var oPass = 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="首位不能是数字";
            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 (oPass.value.length < 6 || oPass.value.length > 20) {
            oError.innerHTML = "密码为6-20位。";
            return;
        }
        window.alert("登录成功！");
    }
.box{
    width:500px;
    height:300px;
    border:solid 1px wheat;
    background: blue;
    position: absolute;
    text-align: center;
    font-family: "微软雅黑";
}
.input_box{
    width: 350px;
    padding-bottom: 15px;
    margin: 0 auto;
    overflow: hidden;
}

 

posted on 2017-11-01 15:28  045钟嘉丽  阅读(148)  评论(0)  编辑  收藏  举报

导航