JavaScript 基础，登录前端验证

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

    1.放在<body>中

     2. 放在<head>中

     3.放在外部JS文件中

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

1.使用 document.write() 方法将内容写到 HTML 文档中。

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

3.使用 innerHTML 写入到 HTML 元素。

a.使用 "id" 属性来标识 HTML 元素。

b.使用 document.getElementById(id) 方法访问 HTML 元素。

c.用innerHTML 来获取或插入元素内容。

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

放在外部JS文件中
function Login() {
            var oUname = document.getElementById("name")
            var oError = document.getElementById("error_box")
            var opassword = document.getElementById("password")
         if(oUname.value.length<6||oUname.value.length>20){
                oError.innerText="用户名需为6-20个字符";
                return;
            }
            else if(opassword.value.length<6||opassword.value.length>20){
                oError.innerText="密码需在6-20个字符内";
                return;
            }
            else{
                oError.innerHTML="";
            }
             }

 

3.登录页面准备：

    1.增加错误提示框。

    2.写好HTML+CSS文件。

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

4.定义JavaScript 函数。

    1.验证用户名6-20位

 

   

 

    2.

验证密码6-20位

 

 

5.onclick调用这个函数。

 

HTML文件

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录|哈哈书院</title>
    <link rel="stylesheet"type="text/css"href="../static/css/dl.css">
     <script>
         function Login() {
            var oUname = document.getElementById("name")
            var oError = document.getElementById("error_box")
            var opassword = document.getElementById("password")
         if(oUname.value.length<6||oUname.value.length>20){
                oError.innerText="用户名需为6-20个字符";
                return;
            }
            else if(opassword.value.length<6||opassword.value.length>20){
                oError.innerText="密码需在6-20个字符内";
                return;
            }
            else{
                oError.innerHTML="";
            }
             }
    </script>
</head>
<body style="background-color: khaki">

<div class="box">
    <div class="dl" ><h2>武林萌主|登录</h2></div>
    <div class="input_box">
             姓名：<input type="text" id="name" placeholder="敢问阁下大名"><br><br>

            密码：<input type="password" id="password" placeholder="请输入通关密码">
    </div>
    <div class="box2">
            <input type="radio" name="role" value="stu">萌主
                <input type="radio" name="role" value="tea">闲杂人等
        <input type="checkbox" name="vehicle" value="Bike">记住密码<br></div>
    <div id="error_box"><br></div>
    <div>
            <button id="login" type="submit" onclick="Login()">登录</button>
            <button id="login" type="submit" onclick=window.alert("取消登录?")>取消</button>
    </div>

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

CSS

 

div{
    width: 700px;
    margin:0 auto;
    text-align:center;
    background: aquamarine;
}

.box{
    width:500px;
    height:250px;
    border-color:pink;
    border-width:1px;
    margin-top:100px;
}
.box2{
   text-align: center;
    font-family: "华文新魏";

}
.dl{
    clear: both;
    text-align: center;
    background-color:aquamarine;
    margin-bottom: 0;
    font-family: "华文新魏";
    font-size: 20px;
    height: 45px;
    color: pink;

}
.input_box {
    height: 175px;
    width: 700px;
    float: left;
    text-align: center;
    font-size: 29px;
    color: aquamarine;
    font-family: "华文彩云";
    background: pink;
}
#login {
    font-family: "华文新魏";


}
#error_box{
    text-align: center;
    font-family: "华文新魏";
}

 

 

 

posted @ 2017-10-27 18:21  阿植  阅读(625)  评论(0)  编辑  收藏  举报