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的验证前端登录验证之cookie,session,token 前端之JavaScript基础及使用方法 2.简易的登录页面（表单验证）（HTML+JavaScript+Jquery）怎样在前端Javascript中调用C#方法(4)验证授权 HTML+PHP+MySQL 制作最基础的登录页面及验证 javascript 命名空间与运用（前端基础系列）登录验证《JavaScript & jQuery交互式Web前端开发》之JavaScript基础指令 renrenfast前端部署-登录页验证码显示不出来问题及解决方案