JavaScript 基礎，登入前端驗證

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

上載者：User

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

標籤：調用擷取警告 hidden utf-8 驗證使用者名稱 link write .com

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

1.放在<body>中

2.放在<head>中

3.放在外部JS檔案中

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

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

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

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

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>介面</title></head><body><p id="jae">ccc</p>    <script>     document.write(Date());     document.getElementById("jae").innerHTML=Date();</script><button type="button" onclick=window.alert("請登入")>登入</button></body></html>

3、登入頁面準備：

增加錯誤提示框。
寫好HTML+CSS檔案
設定每個輸入元素的id

4、定義JavaScript 函數。

驗證使用者名稱6-20位
驗證密碼6-20位
onclick調用這個函數。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歡迎登陸</title>
    <link rel="stylesheet"type="text/css"href="ccc.css">
    <script>
         function myLogin() {
        var oUname = document.getElementById("name")
        var oError = document.getElementById("error_box")
        var opassword = document.getElementById("password")

        if(oUname.value.length<6){
            oError.innerHTML="使用者名稱至少6個字元"
        }
         if(opassword.value.length<6){
            oError.innerHTML="密碼至少6個字元"
        } }
    </script>
</head>
<body>

<div class="box" >
    <div class="jar" ><h2>歡迎登入</h2></div>
    <div class="input_box" >
        姓名：<input id="name" type="text"placeholder="請輸入使用者名稱"><br>
        密碼：<input id="password" type="password"placeholder="請輸入密碼"><br>
        </div>
        <div id="error_box"><br></div>
      <div class="ja" >
         <button onclick="myLogin()">登入</button>
         <button type="button" onclick=window.alert("是否取消登入！")>取消</button>
         </div>
    </div>
</body>
</html>

div{    margin:0 auto;    text-align:center;    backgroup-color:lightblue;}.box{    width:500px;    height:200px;    border-color:blue;    border-style:groove;    border-width:1px;    margin-top:100px;} .input_box{    font-size:18px;    font-weight:bold; }.ja{    width:100px;    height:30px;    boder-style:hidden;}

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

JavaScript 基礎，登入前端驗證

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support