代码改变世界

JavaScript 基础，登录前端验证

2017-10-27 13:35  055李小锐  阅读(288)  评论(0)    收藏  举报

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

a放在<body>中

b放在<head>中

c.放在外部JS文件中

 

2.三种输出数据的方式：

a.使用document.write()方法将内容写到html文档中

b.使用window.alert()弹出警告框

c.使用innerHTML写入到html元素

 1.使用id数学来表示html元素

 2.使用ducument.getElementById(id)方法访问html元素

 3.使用innerHTML来获取或插入元素内容

 

3.登录页面准备：

 a.增加错误提示框。

 b.写好HTML+CSS文件。

 c.设置每个输入元素的id

 

4.定义JavaScript 函数。

 a.验证用户名6-20位

 b.验证密码6-20位

5.onclick调用这个函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascpit</title>
    <script>
        function displayDate() {
            document.getElementById("demo").innerHTML=Date();
        }
    </script>
    <script src="mp.js"></script>

</head>
<body>
<p id="demo"><h2>666</h2></p>
<script>
    document.write(Date());
    document.getElementById("demo").innerHTML=Date();
</script><br>
<button type="button" onclick=window.alert("我")>确认</button>
</body>
</html>

 

 

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Form</title>

<link rel="stylesheet" href="../static/css/AA.css">
    <script>
         function myLogin() {
        var oUname = document.getElementById("uname")
        var oError = document.getElementById("error_box")
        var opassword = document.getElementById("upass")

         if(oUname.value.length<6||oUname.value.length>20){
                oError.innerText="number of uname6-20";
                return;
            }
            else if(opassword.value.length<6||opassword.value.length>20){
                oError.innerText="number of password6-20";
                return;
            }
            else{
                oError.innerHTML="";
            }
             }
    </script>


</head>
<body>

<div class="box" >
    <h1>Login</h1>
    <form method="post">

        <input type="text"  id="uname" placeholder="Uname" required="required" data-form-un="1509016554261.998">
        <input type="password"  id="upass" placeholder="password" required="required" data-form-pw="1509016554261.998">
        <div id="error_box"><br></div>
        <div class="input_box">
        <button onclick="myLogin()" type="submit" class="btn btn-primary btn-block btn-large" data-form-sbm="1509016554261.998" style="pointer-events: auto;">登录</button><br>
        <button onclick=window.alert("是否取消登录！") type="submit" class="btn btn-primary btn-block btn-large" data-form-sbm="1509016554261.998" style="pointer-events: auto;">cancel</button>
        </div>
    </form>
</div>
</body>
</html>

CSS代码

* {
    ms-box-sizing:border-box;
    o-box-sizing:border-box;
    box-sizing:border-box;
}

body {
    width: 100%;
    height:100%;
    background: #092756;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    width:300px;
    height:300px;
}
.box h1 { color: #fff;
          text-shadow: 0 0 10px rgba(0,0,0,0.3);
          letter-spacing:1px;
          text-align:center;
}
input {
    width: 100%;
    margin-bottom: 10px;
    background: rgba(0,0,0,0.3);
    outline: none;
    padding: 10px;
    font-size: 13px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 4px;
}
.btn-large { padding: 9px 14px;
              font-size: 15px;
              line-height: normal;
              -webkit-border-radius: 5px;
}
.btn-primary { background-color: #4a77d4;
    border: 1px solid #3762bc;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}

.btn-block { width: 100%;
              display:block;
}