JavaScript 基础，登录前端验证

时间：2017-10-27 22:04:41 阅读：167 评论：0 收藏：0 [点我收藏+]

标签：nlog 保存 utf-8 char password 输入 cli hello 提示框

<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调用这个函数。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间</title>
    <script type="text/javascript" src="../static/js2.js"></script>
</head>
<body>
    <script>
        document.write(Date())
    </script>
    <p></p>
<button type="button" onclick=window.alert("用户名不能以数字开头")>登录</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广州商学院</title>
</head>
<body>
   <p id="demo">Hello World!</p>
    <script>
        document.getElementById("demo").innerHTML=Date();
    </script>
<button type="button" onclick=window.alert("访问页面发生错误")>登录</button>
</body>

</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="../static/css/login.css" rel="stylesheet" type="text/css">

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

        if(oUname.value.length<6){
            oError.innerHTML="用户名至少为6位"
        }
        if(oUname.value.length>20){
            oError.innerHTML="用户名不得超过20位"
        }
        if(oUname.value.length>6&oUname.value.length<20&oUpass.value.length<6){
            oError.innerHTML="密码至少为6位"
        }
        if(oUname.value.length>6&oUname.value.length<20&oUpass.value.length>20){
            oError.innerHTML="密码不得超过20位"
        }
    }
    </script>
</head>

<body>
<div class="flex-container">
    <div class="box">
        <div id="container" style="width: 400px">
             <div id="header" style="background-color: pink"><h2 align="center"
style="margin-bottom: 0;">Login</h2></div>
         <div id="content" style="background-color: hotpink;height: 150px;width: 400px;float: left;"align="center">
        <div class="input_box">username:<input id=‘uname‘ type="text"  placeholder="please input username"></div>
        <div class="input_box">password:<input id=‘upass‘ type="password"  placeholder="please input password"></div><br>
       <div id="error_box"><br></div>
        <div class="input_box">
            <div class="input_box"><button onclick="fnLogin()">login</button>
                 <button onclick=window.alert("取消将不保存更改")>cancle</button></div>
                    <div id="footer" style="background-color: pink;clear: both;text-align: center;"> duym</div>
        </div>
        <br>
    </div>

</div>
</body>
</html>

JavaScript 基础，登录前端验证

标签：nlog 保存 utf-8 char password 输入 cli hello 提示框

原文地址：http://www.cnblogs.com/qq724852210/p/7745327.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行