JavaScript 基础，登录前端验证

<script></script>的三种用法：
1. 放在<body>中
2. 放在<head>中
3. 放在外部JS文件中
三种输出数据的方式：
1. 使用 document.write() 方法将内容写到 HTML 文档中。
2. 使用 window.alert() 弹出警告框。
3. 使用 innerHTML 写入到 HTML 元素。
  1. 使用 "id" 属性来标识 HTML 元素。
  2. 使用 document.getElementById(id) 方法访问 HTML 元素。
  3. 用innerHTML 来获取或插入元素内容。
登录页面准备：
1. 增加错误提示框。
2. 写好HTML+CSS文件。
3. 设置每个输入元素的id
定义JavaScript 函数。
1. 验证用户名6-20位
2. 验证密码6-20位
onclick调用这个函数。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <script type="text/javascript" src="../static/js/3026.js" ></script>
    <link rel="stylesheet" type="text/css" href="../static/css/3026.css">

</head>
<body class="zong">
<div id="container">
    <div class="box">
        <h2>Login</h2>
</div>
    <div class="input_box">
        <br>
        <br>
        Username:<input id="uname" type="text" placeholder="请输入用户名"></div>
    <div class="input_box">
        <br> Password:<input id="upass" type="password" placeholder="请输入密码">

    </div>
    <div class="error">
        <div id="error_box"></div>
        <div id="mima_box"></div>
    </div>
    <div>
        <button id="login" type="submit" onclick="myLogin()">登录</button>
    </div>
</div>

</body>
</html>

h2 {
    margin-bottom: 0;
    font-size: 40px;
        display: block;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

.zong {
    background-image: url(http://hbimg.b0.upaiyun.com/77e1d2e48dbb91de22637ca03e5e5e05477833941639fe-zWwBmC_fw658);
    background-repeat: no-repeat;
    background-size: 100%;
}

#container {
    width: 700px;
    board: 10px solid #fff310;
    margin: 150px auto;
    text-align: center;
    background: deepskyblue;
    border-radius: 100px;
    border-collapse:separate ;
    border-color: #ff49b0;
    border-bottom-width:12px;
}

.box {
    clear: both;
    text-align: center;
    height: 45px;
    font-size: 25px;
    color: green;
    font-family: 'Georgia',Georgia,'Times New Roman',Times,'Microsoft YaHei',SimSun,SimHei,serif;
    background: deepskyblue;
    border-radius: 1200px;
}

div.input_box {
    height: 175px;
    width: 700px;
    float: left;
    text-align: center;
    font-size: 29px;
    color: deeppink;
    font-family: "华文彩云";
    background: deepskyblue;
    border-radius: 10px;

}

#uname {
    width: 350px;
    height: 40px;
    background-color: pink;
    border-radius: 20px;
}

#upass {
    width: 350px;
    height: 40px;
    background-color: pink;
    border-radius: 20px;
}

#login {
    width: 540px;
    color: grey;
    font-family: 隶书;
    height: 65px;
    font-size: 40px;
    border-radius: 200px;
    background: darkturquoise;
}

.error {
    font-family: 隶书;
    font-size: 35px;
}

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

            if (oUname.value.length < 6) {
                oError.innerHTML = "用户名至少6位"
            }
            else if (oUname.value.length > 20) {
                oError.innerHTML = "用户名最多20位"
            }
            if (oUpass.value.length < 6) {
                oMima.innerHTML = "密码至少6位"
            }
            else if (oUpass.value.length > 20) {
                oMima.innerHTML = "密码最多20位"
            }
            if(oUname.value.length>=6&&oUname.value.length<=20&&oUpass.value.length>=6&&oUpass.value.length<=20){
                return window.alert("用户名密码正确")
            }

        }

posted @ 2017-10-26 19:21 爱学习的土豆阅读(188) 评论(0) 收藏举报

yyjdxgz

JavaScript 基础，登录前端验证

公告