JavaScript 基础，登录前端验证

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

  1. 放在<body>中
  2. 放在<head>中
  3. 放在外部JS文件中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <script>
    document.write(Date());
        </script>
</body>
</html>

三种输出数据的方式：

  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="AIR">

    </P>
        <script >
    document.write(Date());
    document.getElementById("AIR").innerHTML=Date()
        </script>
    <button type="button" onclick=window.alert("出错了")>错误提示</button>
</body>
</html>

  1. 登录页面准备：
    1. 增加错误提示框。
    2. 写好HTML+CSS文件。
    3. 设置每个输入元素的id
  2. 定义JavaScript 函数。
    1. 验证用户名6-20位
    2. 验证密码6-20位
  3. onclick调用这个函数。

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

    <script>

function MyLogin() {
            var oUname=document.getElementById("uname");
            var oUpass=document.getElementById("upass");
            var oError1=document.getElementById("errorbox1");
            var oError2=document.getElementById("errorbox2");
            if(oUname.value.length<6 ||oUname.value.length>20){
                oError1.innerHTML='Usename必须属于6-20位';
            }else {
                oError1.innerHTML="&nbsp"
            }

            if(oUpass.value.length<6||oUpass.value.length>20) {
                oError2.innerHTML = "Password必须属于6-20位";
            }
                else {
                oError2.innerHTML="&nbsp"

            }
        }
    </script>

</head>
<body background="WeChat Image_20171027161942.png" style="background-repeat:no-repeat;background-size: 100% 100%; background-attachment: fixed;">

<div class="container-fluid" >

    <div class="mt-5 pt-5" >
        <div class="card border-primary mb-3 m-auto" style="max-width: 20rem;">
            <div class="card-header text-center">wgd</div>
            <div class="card-body text-primary">
                <h4 class="card-title">用户登录</h4>
                <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                    <div class="input-group-addon"><i class="fa fa-user"></i></div>
                    <input type="text" class="form-control" placeholder="Username" id="uname" required="true">
                </div>
                <p  id="errorbox1" class="m-0 p-0 text-danger"> &nbsp</p>
                <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                    <div class="input-group-addon"><i class="fa fa-lock"></i></div>
                    <input type="password" class="form-control" placeholder="Password" id="upass" required>
                </div>
                <p id="errorbox2" class="m-0 p-0 text-danger"> &nbsp</p>
                <div class="row">
                    <div class="col-3">
                        <button type="button" class="btn btn-outline-primary" onclick="MyLogin()" >登录</button>
                    </div>

                    <div class="col-9 text-sm-right">
                        <a href="#"  >注册 </a>|<a href="#" class="text-sm-right"> 忘记密码？</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
</html>

 

posted on 2017-10-27 18:35  069王国栋  阅读(215)  评论(0)    收藏  举报

导航