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

完成登录与注册页面的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="../static/css/886.css">
    <script src="../static/js/00.js"></script>
</head>
<body>
     <div class="box">
         <h2 class="dd">登录</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>
             <button class="jj" onclick="fnLogin()">登录</button>
        </div>
     </div>
</body>
</html>
 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 letter.";
                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;
            };
           window.alert("登录成功！")
        }

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="../static/css/886.css">
    <script src="../static/js/tt.js"></script>
</head>
<body>
<div class="box">
    <h2 class="dd">注册</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="upass1" type="password" placeholder="请再次输入密码">
    </div>
    <div id="error_box"><br></div>
    <div>
        <button class="jj" onclick="tnlogin()">注册</button>

    </div>
</div>

</body>
</html>
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("注册成功！")
}
.input_box {
    width: 325px;
    height: 40px;
    padding-left: 5px;
    padding-right: 5px;
    background: none;
    line-height: 40px;
    font-size: 14px;
    color: #6699FF;
    vertical-align: middle;
}

.box{
    align-content: center;
    background-color:#FFCCFF;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;
}

.jj{
    text-align: center;
    color: #fff;
    background: #990099;
    width: 30%;
    padding: 9px 18px;
    font-size: 18px;
    border: none;
    border-radius: 25px;
    cursor: pointer;

}
body {
    background-color:#CC33CC;
}
.dd{
    color: #FF3366    ;
}
#error_box{
    color: red;
}

posted @ 2017-11-01 20:31  041覃楚君  阅读(110)  评论(0)    收藏  举报