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

登录html

<!doctype html>
<html lang="en">
<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/jm.css">
    <script src="../static/js/jm.js"></script>
</head>
<body>
    <div class="box">
        <div id="title">LoginText</div>
        <h3>登录</h3>
        <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>
            <a href="">注册/Resister</a>
        </div>
    </div>

</body>
</html>

unction fnLogin() {
    var oUname = document.getElementById("uname")
    var oUpass = document.getElementById("upass")
    var oError = document.getElementById("error_box")
    if (oUname.value.length > 20 || oUname.value.length < 6) {
        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++){
    i<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 letter":
         return;
    }
    }


    if (oUpass.value.length > 20 || oUpass.value.length < 6) {
        oError.innerHTML = "请输入密码 6-20位字符":
        return;
    }
    window alert('登录成功！')
}

　　css

<p id="meto">中国标准时间</p>
<script>document.getElementById("meto").innerHTML = Date()</script>
<div id="container" style="width: 300px">

    <div id="header" style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">><h2 align="center">登陆界面</h2></div>

    <div id="footer" style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">><h3 align="center">版权所有@</h3></div>

　　运行结果

注册html

<!doctype html>
<html lang="en">
<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/register.css">
    <script src="../static/js/register.js"></script>
</head>
<body>
    <div class="box">
        <div id="title">LoginText</div>
        <h3>注册</h3>
        <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="upass2" type="password" placeholder="请再次输入密码">
        </div>
        <div id="error-box"><br></div>
        <div class="input-box">
            <button onclick="fnLogin()">注册</button>

        </div>
    </div>

</body>
</html>

function fnLogin() {
    var Uname = document.getElementById("uname").value;
    var Upass = document.getElementById("upass").value;
    var Upass2=document.getElementById("upass2").value;
    var Error = document.getElementById("error_box").value;
      Error.innerHTML="<br>"
    if (Uname.value.length > 20 || Uname.value.length < 6) {
        Error.innerHTML = "请输入用户名6-20位字符"
        return;
    }else if(Uname.value.charCodeAt(0)>=48 && Uname.value.charCodeAt(0)<=57) {
       Error.innerHTML = "用户名首字符必须是字母"
       return;
    }else for (var i=0; i<oUname.value.length;i++){
    i<Uname.value.charCodeAt(i)<48 || Uname.value.charCodeAt(i)>57 && (Uname.value.charCodeAt(i)<97) || (Uname.value.charCodeAt(i)>122){
         Error.innerHTML = "用户名必须为字母或数字";
         return;
    }
    }

     if (Upass.value.length > 20 || Upass.value.length < 6) {
        Error.innerHTML = "请输入密码 6-20位字符"
        return;
    }
     else if (Upass!=Upass2){
        document.getElementById("error_box").Error.innerHTML="两次密码不一致";
        return;

    }
        window.alert("注册成功")
}

　　css

<div id = "login">
<p>用户名称：
<input type="text" name="username" value="" id="username"
maxlength="30" size="30" style="width:20%"  /></p>
<p>用户密码：
<input type="password" name="password" value="" id="password"
maxlength="30" size="30" style="width:20%"  /></p>
<p>确认密码：
<input type="password" name="password_check" value=""
id="password_check" maxlength="30" size="30" style="width:20%" onblur="check()"  />

<span id="warning">   </span>
</p>

运行结果

posted on 2017-11-01 20:42 133陈贝阅读(206) 评论(0) 收藏举报