JavaScript 基础，登录前端验证

    1. <script></script>的三种用法：
      1. 放在<body>中
      2. 放在<head>中
      3. 放在外部JS文件中
    2. 三种输出数据的方式：
      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="lay">Love Lay</p>
    <script>
        document.write(Date());
        document.getElementById("lay").innerHTML=welcome();
    </script>
<button type="button" onclick=window.alert("404nofound")>click to login</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>LoveLAY</title>
    <link rel="stylesheet"type="text/css"href="login.css">
    <script>
        function myLogin() {
            var one=document.getElementById("name");
            var two=document.getElementById("password");
            var three=document.getElementById("error_box");
            if(two.value.length<6){
                three.innerHTML="请输入6位以上20位以下的密码！"
            }
            if(one.value.length<6){
                three.innerHTML="账号长度需为6-20个字母！"
            }
        }
    </script>
</head>
<body class="a" >
<div class="b" id="container"  >
    <div class="b1" id="header" >
        <h2 >会员登录</h2></div>
    <div class="b2" id="content">
        <div class="login-box">
            <br>用户名<input id="name" type="text" name="user" placeholder="请输入账号">
        </div>
        <div class="password-box">
            <br>密码<input id="password" type="password" name="pass"><br>
        </div>
           <br><input type="radio">普通会员
           <input type="radio">VIP会员
        <div class="button-box">
            <br><input  type="submit" value="登录" onclick="myLogin()" >
            <input type="button" value="注册" onclick="youLogin()" ></br>
         <div id="error_box"><br></div>
        </div>
    </div>
    <div class="c" id="footer">版权*Judy</div>
</div>
</body>
</html>

 

h2{
    margin-bottom:0;
    font-size: 33px;
    font-family: 华文行楷;
    text-align:center
}
.a{
    text-align: center
}
.b{
    width:500px;
    margin: 0 auto
}
.b1{
    background-color:palevioletred;
    height: 40px
 }
.b2{
     background-color:gainsboro;
    height: 260px;
    width:500px;
    float:left;
    text-align:center;
    font-size: 22px
}
.login-box{
    height: 20px;
    font-size:20px;
    margin: 10px;
}
.password-box{
    height: 20px;
    font-size:20px;
    margin: 10px;
}
.button-box{
    width:500px;
    height:260px;
    font-size:20px;
    text-align: center;
    margin: 10px;
}
.c{
     background-color:palevioletred;
    clear:both;
    text-align:center;
    height: 40px;
    font-size: 31px;
    font-family: 华文行楷
}

 

posted @ 2017-10-27 21:01  011赖颖璇  阅读(111)  评论(0)  编辑  收藏  举报