代码改变世界

JavaScript 基础，登录验证

2017-10-26 16:57  019王泽  阅读(209)  评论(0)    收藏  举报

 

    1. <script></script>的三种用法：
      1. 放在<body>中
      2. 放在<head>中
      3. 放在外部JS文件中
    2. 三种输出数据的方式：
      1. 使用 document.write() 方法将内容写到 HTML 文档中。
      2. 使用 window.alert() 弹出警告框。
      3. 使用 innerHTML 写入到 HTML 元素。
        1. 使用 "id" 属性来标识 HTML 元素。
        2. 使用 document.getElementById(id) 方法访问 HTML 元素。
        3. 用innerHTML 来获取或插入元素内容。

    3. 登录页面准备：
      1. 增加错误提示框。
      2. 写好HTML+CSS文件。
      3. 设置每个输入元素的id
    4. 定义JavaScript 函数。
      1. 验证用户名6-20位
      2. 验证密码6-20位
    5. onclick调用这个函数。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到登录界面，请登录</title>

    <script type="text/javascript" src="sdda.js"></script>
    <link rel="stylesheet" href="sdf.css">
</head>
<body>
<p id="meto">中国标准时间</p>
<script>document.getElementById("meto").innerHTML = Date()</script>
<div id="container" style="width: 300px" align="center">
    <div id="header" style="background-color: yellow"><h2 align="center">登陆界面</h2></div>
    <div id="content" style="background-color: aqua">

            <p align="center">用户名：<input id="uname" type="text" name="user" placeholder="请输入账号">

            </p>
            <p align="center"> 密码&nbsp：<input id="upass" type="password" name="psw" placeholder="请输入密码"></p>
            <br>
            <div id="error_box"><br>
            </div>
            <input type="radio" value="stu">用户
            <input type="radio" value="tea">会员
            <br>

            <input type="checkbox" value="true">记住密码 <a href="">登陆遇到问题</a><br>
            <button onclick="fnLogin()">登陆</button>
            &nbsp&nbsp&nbsp
            <input type="button" name="regist" value="注册">


    </div>
    <div id="footer" style="background-color: crimson"><h3 align="center">版权@hir</h3></div>
</div>
</body>
</html>

 

function 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位字符"
    }

    if (oUpass.value.length > 20 || oUpass.value.length < 6) {
        oError.innerHTML = "密码为 6-20位字符"
    }
}