JavaScript 基礎，登入驗證

最後更新：2017-10-27 來源：互聯網

上載者：User

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

標籤：調用 nlog innerhtml java 驗證使用者名稱 stat func 方法 style

放在<body>中

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JavaScriptTest</title></head><body><script type="text/javascript">alert("放在body裡的JavaScript代碼")</script></body></html>

放在<head>中

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JavaScriptTest</title>    <script type="text/javascript">alert("放在head裡的JavaScript代碼")</script></head><body></body></html>

放在外部JS檔案中

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JavaScriptTest</title>    <script src="../static/js/javaScript.js"></script></head><body></body></html>

alert("放在js檔案裡的JavaScript代碼")

三種輸出資料的方式：
1. 使用 document.write() 方法將內容寫到 HTML 文檔中。
```
<body><script>document.write(Date())</script></body>
```
2. 使用 window.alert() 彈出警告框。
```
<body><h3>JavaScriptTest彈出警告框</h3>      <button type="button" onclick=window.alert("你的資訊錯誤")>登入</button></body>
```
3. 使用 innerHTML 寫入到 HTML 元素。
  1. 使用 "id" 屬性來標識 HTML 元素。
  2. 使用 document.getElementById(id) 方法訪問 HTML 元素。
  3. 用innerHTML 來擷取或插入元素內容。
```
<p id="test">ppp</p><script>    document.getElementById("test").innerHTML="HELLO"</script>
```
登入頁面準備：
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>login</title>    <link rel="stylesheet" type="text/css" href="../static/css/10.24.css">    <script src="../static/js/10.24.js"></script></head><body><div class="box">    <div id="title">LoginText</div>    <h3>登入</h3>    <div class="input-box">        帳號：<input id="uname" type="text" placeholder="請輸入使用者名稱">    </div>    <div class="input-box">        密碼：<input id="upass" type="password" placeholder="請輸入密碼">    </div>    <div id="error-box"><br></div>    <div class="input-box">        <button onclick="fnLogin()">登入</button>        <a href="">註冊/Resister</a>    </div></div></body></html>

function fnLogin() {         var oUname = document.getElementById("uname");         var oError = document.getElementById("error-box");         var oUpass = document.getElementById("upass");         var isoError = true;         oError.innerHTML = "<br>";         if (oUname.value.length<6||oUname.value.length>20){              oError.innerHTML="使用者名稱要6-20位";              isoError = false;              return;                }          if (oUpass.value.length<6||oUpass.value.length>20){                    oError.innerHTML="密碼至少6-20位";                     isoError = false;                      return;            }        }

JavaScript 基礎，登入驗證

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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