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

登陆

<!doctype html>
<html lang="em">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="../static/css/styles.css">
    <script src="../static/js/test.js"></script>

</head>
<body class="body">

    <div class="box">
        <h2 class="ziti">登录</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 class="input_box">
            <button  onclick="fnLogin()">登录</button>
        </div>
    </div>

</body>
</html>

js

        function fnLogin() {
            var oUname = document.getElementById("uname");
            var oError = document.getElementById("error_box");
            var oUpass = document.getElementById("upass");

            oError.innerHTML="<br>"

            if(oUname.value.length<6 || oUname.value.length >12){
                oError.innerHTML="用户名6-12";
                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(oUpass.value.length<6 || oUpass.value.length>12){
                oError.innerHTML="密码6-12位";
                return;
            }
            window.alert("登录成功")
        }

css

    .ziti{
        font-size: 30px;
    }
    .body{
        background-color: lightblue;
        text-align: center;

    }
    .input_box{
       height: 45px;
    }

 

 

 

注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="../static/css/styles.css">
    <script src="../static/js/zhuce.js"></script>
</head>

<body class="body">
    <div class="box">
        <h2 class="ziti">注册</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="uiphone" type="number" placeholder="手机号">
        </div>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button  onclick="fnLogin()">注册</button>
        </div>
    </div>
</body>
</html>

js


function fnLogin() {
    var oUname = document.getElementById("uname");
    var oError = document.getElementById("error_box");
    var oUiphone = document.getElementById("uiphone");
    var oUpass = document.getElementById("upass");

    oError.innerHTML="<br>"

    if(oUname.value.length<6 || oUname.value.length >12){
        oError.innerHTML="用户名6-12";
        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(oUpass.value.length<6 || oUpass.value.length>12){
        oError.innerHTML="密码6-12位";
        return;
    }
    if ((oUiphone.value.length >11)|| (oUiphone.value.length <11)){
        oError.innerHTML="手机号码错误";
        return;
    }
    window.alert("注册成功")
}

 

 

posted @ 2017-10-31 09:56  003刘淑千  阅读(259)  评论(0)  编辑  收藏  举报