JavaScript 基础，登录验证

1.<script></script>的三种用法：

　　1.放在<body>中

　　2.放在<head>中

　　3放在外部JS文件中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JS_Demo</title>
 6     <script type="text/javascript" src="../static/js/public.js"></script>
 7     <script>
 8         function change() {
 9             document.getElementById('demo').innerHTML = '明天！！！';
10         }
11     </script>
12 </head>
13 <body>
14     <p id="demo">howw</p>
15     <input type="button" onclick="change()" value="ccc">
16     <script language="JavaScript">
17         document.write('第二');
18         alert('第一');
19     </script>
20 </body>
21 </html>

 

2.三种输出数据的方式：

　　1.使用 document.write() 方法将内容写到 HTML 文档中。

　　2.使用 window.alert() 弹出警告框。

　　3.使用 innerHTML 写入到 HTML 元素。

　　　　1.使用 "id" 属性来标识 HTML 元素。

　　　　2.使用 document.getElementById(id) 方法访问 HTML 元素。

　　　　3.用innerHTML 来获取或插入元素内容。

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>javascpit</title>
 6     
 7 </head>
 8 <body>
 9 <p id="demo">666</p>
10 <script>
11     document.write(Date());
12     document.getElementById("demo").innerHTML=Date();
13 </script>
14 <button type="button" onclick=window.alert("错误")>press</button>
15 </body>
16 </html>

 

 

3.登录页面准备：

　　1.增加错误提示框。

　　2.写好HTML+CSS文件。

　　3.设置每个输入元素的id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>064</title>
</head>
<body>
<h1 align="center">黄庚华</h1>
<h1>064111</h1>
<div id="container" style="width: 400px">
    <div id="header" style="background-color: darkgreen"><h2>登陆</h2></div>
    <div id="content"></div>
    <from>
        用户名：<input type="text" name="usename" aria-placeholder="请输入用户名"><br>
        密码： <input type="password">
        <br>
        <input type="radio" name="role" value="stu">student
        <input type="radio" name="role" value="tea">teacher
        <input type="checkbox" name="vehicle" value="Bike">I have a bike
        <input type="button" value="Hello world!">

    </from>
    <div id="footer" style="background-color: darkgreen"><h2>版权</h2></div>
</div>
<hr>
<a href="#">友情链接</a>
</body>
</html></html>

 

4.定义JavaScript 函数。

　　1.验证用户名6-20位

　　2.验证密码6-20位

 

 1  function fnLogin() {
 2              var oUname=document.getElementById("uname");
 3              var oUpass=document.getElementById("upass");
 4              var oError=document.getElementById("error_box");
 5              if (oUname.value.length < 6 || oUname.value.length > 20) {
 6                  oError.innerHTML = "用户名要6-20位"
 7              }
 8              if (oUpass.value.length < 6 || oUpass.value.length > 20) {
 9                  oError.innerHTML = "密码要6-20位"
10              }
11  
12              if ((oUname.value.length < 6 || oUname.value.length > 20) && (oUpass.value.length < 6 || oUpass.value.length > 20)) {
13                  oError.innerHTML = "用户名和密码要6-20位"             }
14          }

 

5.onclick调用这个函数

 

1 <button class="button" onclick="Login()">登录</button>

 

 

运行图：

 

posted @ 2017-10-25 23:26  064黄庚华  阅读(301)  评论(0)    收藏  举报