JavaScript 基础，登录前端验证

Posted 2020-10-12 YWEIEN

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 基础，登录前端验证相关的知识，希望对你有一定的参考价值。

放在<body>中
放在<head>中
放在外部JS文件

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<p id="denglu"></p>
    <script>
     document.write(Date());
     document.getElementById("denglu").innerHTML=Date();
</script>
<button type="button" onclick=window.alert("请先登录")>登录</button>
</body>
</html>

三种输出数据的方式：
1. 使用 document.write() 方法将内容写到 HTML 文档中。
2. 使用 window.alert() 弹出警告框。
3. 使用 innerHTML 写入到 HTML 元素。
  1. 使用 "id" 属性来标识 HTML 元素。
  2. 使用 document.getElementById(id) 方法访问 HTML 元素。
  3. 用innerHTML 来获取或插入元素内容。
登录页面准备：
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>MIS问答平台</title>
    <link rel="stylesheet" type="text/css" href="T4.css">

    <script >
        function myLogin(){
            var oUname = document.getElementById("uname");
            var oError = document.getElementById("userpass");
            var uerror=document.getElementById("errorone");
         if(uname.value.length<6 ||umane.value.length>20){
                uerror.innerHTML="用户名长度不可超过6-20";
            }
        }
    </script >
</head>
</body>

<div class ="mubiao">
    <h2>登录</h2>

    <div class="inputone" >

            用户名:<input type="text"name="用户名"placeholder="请输入用户名"><br>
    </div>

    <div class="inputone" >
           密码:<input type="password"name="密码"placeholder="请输入密码"><br>
    </div>
    <div id="errorone"><br></div>

    <div class="login ">
        <button onclick="login()">会员登录</button>
        </div>

     <h2>版权  duym</h2>>

     </div>

     </body>
     </html>
 

h2{ text-align: center;margin-bottom:0;background-color:#66b3ff;}
.mubiao{
    width: 500px;
    height:400px;
    margin: auto;
    background-color:#ffffff;
}
.inputone{
    height:50px;
    margin: 0 auto;

}
.login{
    witdth:40px;
    height:50px;

}

t4{ text-align: center;margin-bottom:0;background-color:#66b3ff;}
.mubiao{
    width: 500px;
    height:400px;
    margin: auto;
    background-color:#ffffff;
}
.inputone{
    height:50px;
    margin: 0 auto;

}
.login{
    witdth:40px;
    height:50px;

}

以上是关于JavaScript 基础，登录前端验证的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript 基础，登录前端验证