JavaScript 基礎，登錄前端驗證

本文轉載自查看原文 2017-10-26 12:59 3445

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

放在<body>中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
</head>
<body>
<script>
    document.write(Date());
</script>
</body>
</html>

放在<head>中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
    <script>
        function displayDate() {
            document.getElementById("demo").innerHTML = Date();
        }
    </script>
</head>
<body>
<h1>我的JavaScript程序</h1>
<p id="demo">這是一個段落</p>
<button type="button" onclick="displayDate()">顯示日期</button>
</body>
</html>

放在外部JS文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
    <script type="text/javascript" src="../static/one.js"></script>
</head>
<body>
<h1>我的JavaScript程序</h1>
<p id="demo">這是一個段落</p>
<button type="button" onclick="myFunction()">顯示</button>
</body>
</html>

function myFunction() {
    document.getElementById("demo").innerHTML="外部";
}

三種輸出數據的方式：

使用 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>JS</title>

</head>
<body>
   <script>
        function myFunction() {
            document.write(Date()) ;
        }
    </script>
<p id="demo">NONONO WhyWhyWhy</p>
<button type="button" onclick="myFunction()">更新</button>
<button type="button" onclick=window.alert("密碼錯誤")>登錄</button>
</body>
</html>

5.登錄頁面准備：

增加錯誤提示框。

寫好HTML+CSS文件。

設置每個輸入元素的id定義JavaScript 函數。

驗證用戶名6-20位
驗證密碼6-20位

onclick調用這個函數。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>登錄</title>
    <link href="../static/css/login.css" rel="stylesheet" type="text/css">
    <script>
    function myLogin() {
        var oUname =document.getElementById("uname");
        var oPass = document.getElementById("upass");
        var oError = document.getElementById("error_box");
        var oError1 = document.getElementById("error_box1");
        if (oUname.value.length < 6) {
            oError.innerHTML ="用戶名至少6位。"
            }
        else if (oUname.value.length > 20) {
            oError.innerHTML = "用戶名必須少於20位。"
            }
        if (oPass.value.length < 6) {
            oError1.innerHTML = "密碼至少6位。"
            }
        else if (oPass.value.length > 20) {
            oError1.innerHTML = "密碼必須少於20位。"
            }
        }
    </script>
</head>
<body>
<div class="main">
    <div class="box">
        <h2>登錄/Please Login</h2></div>
    <div class="input_box">
        <h3>username:</h3><input type="text" id="uname" placeholder="請輸入用戶名">
    </div>
    <div class="input_box">
        <h3>password:</h3><input type="password" id="upass" placeholder="請輸入密碼">
    </div>
    <div id="error_box"><br></div>
    <div id="error_box1"><br></div>
    <div class="input_box"><br>
        <button id="login" onclick="myLogin()">Login </button>
    </div>
</div>
</body>
</html>

css文件：

body{
    background-image:url(http://pic1.win4000.com/wallpaper/2/59c4facd51619.jpg);
    background-position:center;
    background-size:100%;
    background-repeat:no-repeat;
}
div.main{
    width: 400px;
    margin: 150px auto 0;
    padding: 20px 50px 30px;
    background-color:darksalmon;
    border-radius: 30px;
}
div.box{
    width: 400px;
    height: 35px;
}
h2{
    text-align: center;
    font-family: "微軟雅黑";
    font-size: 27px;
    color: crimson;
}
div.input_box{
    text-align: center;
    height: 60px;
    width: 400px;
}
h3{
    text-align: center;
    margin-bottom:0;
    font-family: 'Yu Mincho Demibold';
}
#uname{

    border-radius:10px;
}
#upass{
    border-radius:10px;
}
#login{
    width: 18%;
    padding: 5px 10px;
    font-size: 15px;
    border: none;
    font-family: 'Yu Mincho Demibold';
    border-radius: 25px;
    background:cornflowerblue;
    cursor: pointer;
    color: white;
}
#error_box{
    color: red;
    text-align: center;

}
#error_box1{
    color: red;
    text-align: center;

}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 如何跳過前端JavaScript的驗證 html前端登錄驗證 JavaScript：基礎表單驗證前端基礎之JavaScript 前端基礎之JavaScript 前端基礎之JavaScript JavaScript | 基礎表單驗證（純Js）從零開始學習前端JAVASCRIPT — 1、JavaScript基礎用javascript實現簡單的用戶登錄驗證用javascript實現簡單的用戶登錄驗證