首頁 > 開發者 > JavaScript

JavaScript 基礎，登入驗證(2017.10.24)

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：第一個   back   orm   innerhtml   屬性   play   系統   方式   org   

1、<script></script>的三種用法：

放在<body>中

放在<head>中

放在外部JS檔案中

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>javascpit2017.10.24</title>    <script>        function displayDate() {            document.getElementById("hello").innerHTML=Date();        }    </script></head><body><p id="demo">dailier</p><script>    document.write("<p>廣州商學院</p>");    document.getElementById("demo").innerHTML=Date();</script><button type="button" onclick=window.alert("number")>登入</button></body></html>
function myFunction(){document.getElementByld("demo").innerHTML="我的第一個JavaScript函數";｝

2、三種輸出資料的方式：

使用 document.write() 方法將內容寫到 HTML 文檔中。

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

使用 innerHTML 寫入到 HTML 元素。

 

  1. 使用 "id" 屬性來標識 HTML 元素。
  2. 使用 document.getElementById(id) 方法訪問 HTML 元素。
  3. 用innerHTML 來擷取或插入元素內容。

 

 

代碼如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>我的頁面</title></head><body><h1>廣州商學院</h1><h2>教務系統</h2><script>     document.wirte(Date())</script><h1 align="center">2017年全新版</h1>   <h3>請在以下介面登陸！</h3>   <hr>   <div id="container" style="width: 400px">       <div id="header" style="background-color: indianred"><h2 align="center">登入</h2></div>       <div id="content">           <form>               username：<input type="text"name="username"placeholder="請輸入使用者名稱"><br>               password：<input type="password"name="pwd"placeholder="請輸入密碼"><br>               <input type="radio"name="role"value="stu">student               <input type="radio"name="role"value="tea">teacher<br>               <input type="checkbox"name="vehicle"value="remember me">記住我<br>               <input type="button" value="登入"><br>                <a class="link-forget cl-link-blue" href="get_password.html">忘記密碼</a>　　                <a class="link-forget cl-link-blue" href="index.php?type=login">新使用者註冊</a>           </form>       </div>       <div id="footer" style="background-color: indianred"><p align="center"><i>著作權呆梨</i></p></div>   </div>   <div>   </div><script>    window.alert("確定要進入此網站嗎？")</script><script>    document.wirte(Date());</script><p id="demo">dailier</p><script>    document.getElementById("demo").innerHTML=Date();</script></body></html>

結果如下：

 

3、登入頁面準備：

增加錯誤提示框。

寫好HTML+CSS檔案。

設定每個輸入元素的id

4、定義JavaScript 函數。

驗證使用者名稱6-20位

驗證密碼6-20位

代碼如下：

 

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"> <title>搜尋百科</title>        <link rel="stylesheet" type="text/css" href="../static/css/20.css">        <script>        function fnLogin() {            var oUname=document.getElementById("uname")            var oError=document.getElementById("error_box")            var opassward = document.getElementById("upass")            if(oUname.value.length<6 || oUname.value.length>20){                oError.innerHTML="使用者名稱6-20位"            }            if (oUpass.value.length<6 || oUpass.value.length>20){            oError.innerHTML="密碼6-20位"             }             if ((oUname.value.length<6 || oUname.value.length>20)&&(oUpass.value.length<6 || oUpass.value.length>20)){            oError.innerHTML="使用者名稱和密碼必須6-20位！"}        }    </script></head ><body><div class="box">    <h2>Hello.歡迎來到廣州商學院!</h2>    <h3>登入</h3>        <div class="input_box">           <input id="uname" type="text" placeholder="請輸入使用者名稱" style="width: 300px">        </div>        <br>        <div class="input_box">           <input id="upass" type="password" placeholder="請輸入密碼" style="width: 300px">        </div>        <br>        <div id="error_box"><br></div>        <div class="input_box">            <h5><button onclick="fnLogin()">login</button></h5>        </div></div>                 <br>             <a class="link-forget cl-link-blue" href="get_password.html">忘記密碼</a>　　             <a class="link-forget cl-link-blue" href="index.php?type=login">新使用者註冊</a>    <br>     <div><p align="center"><i>著作權@daili18</i></p></div></div><h4><script>    document.write("學院美景：小東湖")</script></h4><script>    window.alert("請確定要進入嗎？")</script></body></html>

 

 css：

body{    padding-right:500px;    margin-top:100px;    padding-left:500px;    font-size:16px;    background:palevioletred;    padding-bottom:120px;    color:firebrick;    padding-top:40px;    font-family:verdana,Arial,Helvetica,sans-serif;    }h3 {       padding-left:120px;}h4{    padding-left:80px;    color:firebrick;}h5{    padding-left:120px;}

結果如下：

 

 

 

5、onclick調用這個函數。

代碼如下：

 

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"> <script>        function duang(){alert(‘這裡沒有你要找的‘)}</script></head><body> <input id="input_box" type="button" value="Are you really？" onclick="duang()"></body></html>

結果如下：

 

JavaScript 基礎，登入驗證(2017.10.24)

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More