JavaScript 基础，登录前端验证

最新推荐文章于 2024-08-25 09:57:22 发布

weixin_30781433

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量95

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/blackboardf/p/7745248.html

版权

<script></script>的三种用法：
1. 放在<body>中
2. 放在<head>中
3. 放在外部JS文件中
三种输出数据的方式：
1. 使用 document.write() 方法将内容写到 HTML 文档中。
2. 使用 window.alert() 弹出警告框。
3. 使用 innerHTML 写入到 HTML 元素。
  1. 使用 "id" 属性来标识 HTML 元素。
  2. 使用 document.getElementById(id) 方法访问 HTML 元素。
  3. 用innerHTML 来获取或插入元素内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="demo">11</p>
<script>
    document.write(Date());
    document.getElementById("demo").innerHTML=new Date();
</script>
<button type="button" onclick=window.alert("404页面找不到")>查询</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>SongWei</title>
   <link type="text/css" href="aa.css" rel="stylesheet">



    <script>
    function fnLogin() {
        var oUname = document.getElementById("uname")
        var oError = document.getElementById("error_box")
        var oUpass = document.getElementById("upass")

        if(oUname.value.length<6){
            oError.innerHTML="用户名至少6位"
        }
        if(oUname.value.length>20){
            oError.innerHTML="用户名不超过20位"
        }
        if(oUname.value.length>6&oUname.value.length<20&oUpass.value.length<6){
            oError.innerHTML="密码至少6位"
        }
        if(oUname.value.length>6&oUname.value.length<20&oUpass.value.length>20){
            oError.innerHTML="密码不超过20位"
        }
    }
    </script>


</head>
<body>
<div class="flex-container">
    <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><br>
       <div id="error_box"><br></div>
        <div class="input_box">
            <div class="input_box"><button onclick="fnLogin()">登录</button>
                 <button onclick=window.alert("请重新输入")>取消</button></div>
        </div>
        <br>
    </div>
</div>

</body>
</html

CSS

h2{
    align-content: center;
   }
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 300px;
    height: 300px;
    padding-left: 100px;
    padding-top: 30px;
    background-color:darkseagreen ;
    }
#input_box{
    align:center;
    margin:700px;
    padding-left:700px;
    }

#error_box{
    color: orangered;
    }
body{ padding-right:500px; margin-top:100px; padding-left:500px; font-size:16px; padding-bottom:40px; padding-top:40px; font-family:verdana,Arial,Helvetica,sans-serif; }

转载于:https://www.cnblogs.com/blackboardf/p/7745248.html

weixin_30781433

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 基础，登录前端验证

<script></script>的三种用法：放在<body>中放在<head>中放在外部JS文件中三种输出数据的方式：使用 document.write() 方法将内容写到 HTML 文档中。使用 window.alert() 弹出警告框。使用 innerHTML 写入到 HTML 元素。使用 "id" 属性...
复制链接

扫一扫