JavaScript 基礎，登入前端驗證

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

上載者：User

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

標籤：har html+css com name 插入警告使用者準備 html

<script></script>的三種用法：
1. 放在<body>中
2. 放在<head>中
3. 放在外部JS檔案中

三種輸出資料的方式：

使用 document.write() 方法將內容寫到 HTML 文檔中。
使用 window.alert() 彈出警告框。

使用 innerHTML 寫入到 HTML 元素。

使用 "id" 屬性來標識 HTML 元素。
使用 document.getElementById(id) 方法訪問 HTML 元素。

用innerHTML 來擷取或插入元素內容。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>使用者提示</title></head><body>      <p>Hello！</p>      <script>          document.write(Date())      </script>  <button type="button" onclick=window.alert("使用者名稱不得以數字開頭")>LOGIM</button></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>使用者提示</title></head><body>      <p id="demo">Hello！</p>      <script>          document.getElementById("demo").innerHTML = Date();      </script>  <button type="button" onclick=window.alert("使用者名稱不得以數字開頭")>LOGIN</button></body></html>

登入頁面準備：
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> <link rel="stylesheet" type="text/css" href="../aa/css/1.css"></head><body><script>        function myLogin() {            var oUname = document.getElementById("umane");            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>><body><div class="bigbox">      <div class="box">          <h2 align="center">登入</h2>       <div class="input_box">           賬戶：<input id="umane"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="myLogin()">登入</button>               <button onclick=window.alert("是否取消登入？")>取消</button></div>          </div>               </div></body></html>

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