JavaScript 基礎，登入驗證

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

上載者：User

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

標籤：length notice pass window image 錯誤提示 class ges 結束

---恢複內容開始---

放在<body>中
放在<head>中

放在外部JS檔案中

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Welcome</title>    <link href="../static/css/js123.css"rel="stylesheet"type="text/css">    <script type="text/javascript" src="../static/js/js23.js"></script>    <script>        function Myfunction() {            document.getElementById("demo").innerHTML="第一個JavaScript函數";        }    </script></head><body><h1>歡迎進入beryl的第一個JavaScript程式</h1><p id="demo">請進入下一個介面</p><script>    document.write(Date()).innerHTML=beryl;    document.getElementById("demo").innerHTML=abcdefg;</script><button type="button" onclick=window.alert("Notice!")>enter</button></body></html>

三種輸出資料的方式：

使用 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>Welcome</title></head><body><p id="demo">請進入下一個介面</p><script>    document.write(Date()).innerHTML=beryl;    document.getElementById("demo").innerHTML=abcdefg;</script><button type="button" onclick=window.alert("Notice!")>enter</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 href="MIS/static/css/111.css"rel="stylesheet" type="text/css">    <script>        function fnlogin() {            var oUname=document.getElementById("uname");            var oUpass=document.getElementById("upass");            var oError=document.getElementById("error_box");            if(oUname.value.lenth<6||oUname.value.length>20){                oError.innerHTML="使用者名稱要6-20位"            }            if(oUpass.value.length<6||oUpass.value.length>20){                oError.innerHTML="密碼要6-20位"            }        }    </script></head><body><div class="box">    <h2>登入</h2>    <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>        <button type="button" onclick=window.alert("請重新輸入")>未輸入帳號密碼</button>    </div></div></body>

body{    width: 80px;    heigth:80px;    margin: 0;    background: rebeccapurple;}h2{    background: rgba(0,80,100,0.9);    color:#cccccc;    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;    from-size:2em;    padding: 10px 20px 20px 15px;    margin-top: 0;    margin-bottom: 18px;}.input_box{    padding: 5px;    min-width: 50%;    height: 20px;    border-radius: 4px;    border: none;    font-family: ‘Nunito‘, sans-serif;    font-weight: normal;}.button{    text-align: center;    display: block;    padding: 0;    width: 100%;    margin-bottom: 10px;    color: #fff;    font-family: ‘Nunito‘, sans-serif;    font-weight: 500;    font-size: 0.8em;    background: darkgoldenrod;}

---恢複內容結束---

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