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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="../static/css/js23.css" rel="stylesheet" type="text/css">
    <script src="../static/js/js23.js"></script>
</head>
<body>
<div class="bg-img">
   <div class="box">
       <h1>登录</h1>
       <div class="input_box">
           <h3>username</h3>
           <input id="username" type="text" placeholder="请输入用户名">
       </div>
       <div class="input_box">
           <h3>userpass</h3>
           <input id="userpass" type="password" placeholder="请输入密码">
       </div>
       <br>
       <div class="link_box">
           <a href="js24.html">
               没有账号，立即注册
               <b> ></b>
           </a>
       </div>
       <div id="error_box"><br></div>
       <div class="input_box">
           <button onclick="fnLogin()">LOGIN</button>
           <button onclick=window.alert(fnLogin())>RESET</button>
       </div>
   </div>
</div>
</body>
</html>

.box{
    text-align: center;
    border-style: double;
    border-color: darkred;
    background-color: darkgray;
    width: 500px;
    height: 350px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 350px;
    margin-bottom: 350px;
    font-family: 微软雅黑;
}
.input_box{
    font-style: oblique;
    color: midnightblue;
}
#error_box{
    color: red;
}
body{
    background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508932648993&di=3324a646dccbe08cb229f149ad965932&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3031912242%2C2915528479%26fm%3D214%26gp%3D0.jpg);
    background-size: cover;
}
.link_box{
    font-style: inherit;
    font-family: 黑体;
    text-align: right;
}

function fnLogin() {
    var oUsername = document.getElementById("username");
    var oUserpass = document.getElementById("userpass");
    var oError = document.getElementById("error_box");
    oError.innerHTML = "<br>";
    if (oUsername.value.length > 20 || oUsername.value.length < 6) {
        oError.innerHTML = "用户名6到20位";
        return;
    }
    else if ((oUsername.value.charCodeAt(0) >= 48) && oUsername.value.charCodeAt(0) <= 57) {
        oError.innerHTML = "first number";
        return;
    }
    else for (var i = 0; i < oUsername.value.length; i++) {
            if ((oUsername.value.charCodeAt(i) < 48 || oUsername.value.charCodeAt(i) > 57) && (oUsername.value.charCodeAt(i) < 97 || oUsername.value.charCodeAt(i) > 122)) {
                oError.innerHTML = "only letter or name.";
                return;
            }
        }
    if (oUserpass.value.length > 20 || oUserpass.value.length < 6) {
        oError.innerHTML = "密码6到20位";
        return;
    }
    else if ((oUserpass.value.charCodeAt(0) >= 48) && oUserpass.value.charCodeAt(0) <= 57){
        oError.innerHTML = "first number";
        return;
    }
    window.alert("登录成功！")
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>REGISTER</title>
    <link href="../static/css/js24.css" rel="stylesheet" type="text/css">
    <script src="../static/js/js24.js"></script>
</head>
<body>
<div class="bg-img">
    <div class="box">
        <h1>注册</h1>
        <div class="input_box">
            用户名：<input id="username" type="text" placeholder="请输入新用户名">
        </div>
        <br>
        <div class="input_box">
            密 码：&nbsp&nbsp<input id="userpass" type="password" placeholder="请输入新密码">
        </div>
        <br>
        <div class="input_box">
            密 码：&nbsp&nbsp<input id="reuserpass" type="password" placeholder="请再次输入新密码">
        </div>
        <br>
        <div class="link_box">
            <a href="js23.html">
                已有帐号，立即登陆
                <b> ></b>
            </a>
        </div>
        <div id="error_box"><br></div>
        <div class="input_box">
           <button id="button" onclick="fnRegister()">注册</button>
        </div>
    </div>
</div>
</body>
</html>

.box{
    text-align: center;
    border-style: double;
    border-color: darkred;
    background-color: darkgray;
    width: 500px;
    height: 350px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 350px;
    margin-bottom: 350px;
    font-family: 微软雅黑;
}
.input_box{
    font-style: oblique;
    color: midnightblue;
}
#error_box{
    color: red;
}
body{
    background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509533775621&di=f14d8dc10f1be1b6c686e1d70ed4e419&imgtype=0&src=http%3A%2F%2Fimg17.3lian.com%2Fd%2Ffile%2F201702%2F24%2Fa6f0c5d12895a45170e6ca23fc09e3a1.jpg);
    background-size: cover;
}
.link_box{
    font-style: inherit;
    font-family: 黑体;
    text-align: right;
}
#button{
    width: 100px;
    height: 50px;
    font-family: 幼圆;
}

function fnRegister() {
    var oUsername = document.getElementById("username");
    var oUserpass = document.getElementById("userpass");
    var oError = document.getElementById("error_box");
    oError.innerHTML="<br>";

    if(oUsername.value.length >20 || oUsername.value.length <6){
        oError.innerHTML = "用户名6到20位";
        return;
    }
    else if ((oUsername.value.charCodeAt(0) >= 48) && oUsername.value.charCodeAt(0) <= 57) {
        oError.innerHTML = "不能以数字开头";
        return;
    }
    else for (var i = 0; i < oUsername.value.length; i++) {
            if ((oUsername.value.charCodeAt(i) < 48 || oUsername.value.charCodeAt(i) > 57) && (oUsername.value.charCodeAt(i) < 97 || oUsername.value.charCodeAt(i) > 122)) {
                oError.innerHTML = "only letter or name.";
                return;
            }
        }
    if(oUserpass.value.length>20 || oUserpass.value.length<6){
        oError.innerHTML = "密码6到20位";
        return;
    }
    else if ((oUserpass.value.charCodeAt(0) >= 48) && oUserpass.value.charCodeAt(0) <= 57){
        oError.innerHTML = "不能以数字开头";
        return;
    }
    if(document.getElementById("userpass").value!=document.getElementById("reuserpass").value){
        oError.innerHTML = "密码不一致，请重新输入密码";
        return;
    }
    window.alert("注册成功！立即登录")
}

posted @ 2017-11-01 18:24 088郑淑莹阅读(162) 评论(0) 收藏举报

刷新页面返回顶部

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

公告