JavaScript 基础,登录验证
1.<script></script>的三种用法:
a.放在<body>中
b.放在<head>中
c.放在外部JS文件中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>时间</title> <script type="text/javascript" src="../static/js2.js"></script> </head> <body> <p>Hello</p> <script> document.write(Date()) </script> <button type="button" onclick=window.alert("用户名不能以数字开头")>Login</button> </body> </html>
2.三种输出数据的方式:
a.使用 document.write() 方法将内容写到 HTML 文档中。
b.使用 window.alert() 弹出警告框。
c.使用 innerHTML 写入到 HTML 元素。
<1>使用 "id" 属性来标识 HTML 元素。
<2>使用 document.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>My Personal Website.</title> <link href="../static/CSS1/js2.css" rel="stylesheet" type="text/css"> <script> function myLogin() { var oUname=document.getElementById("uname"); var oUpass=document.getElementById("upass"); var oError=document.getElementById("error_box") if (oUname.value.length<6){ oError.innerHTML="用户名至少6位。" } else if (oUname.value.length>20){ oError.innerHTML="用户名不能超过20位。" } if (oUpass.value.length<6){ oError.innerHTML="密码至少6位。" } else if (oUpass.value.length>20){ oError.innerHTML="密码不能超过20位。" } } </script> </head> <body> <div><h1><span style="font-size: 200px;color: darkmagenta;align:center">"代"</span>你飞!</h1></div> <div class="box"> <h2 align="center" style="font-size: 50px;font-family: 华文行楷;color: indigo">登录.注册</h2> <div class="content1"> <div class="name" align="center" style=""> <img src="http://static.mengniang.org/common/thumb/c/c3/User_user.png/300px-User_user.png" width="30"><input id="uname" type="text" placeholder="用户名"><br> </div><br> <div class="email" align="center"> <img src="http://cdn7.staztic.com/app/a/3215/3215272/password-generator-2000000-l-280x280.png"width="30"><input type="password" id="upass" placeholder="密码"> </div> <br> <input type="radio" name="role" value="stu"><font style="font-weight:bold; ">程序“猿”</font> <input type="radio" name="role" value="teacher"><font style="font-weight:bold;">正常人</font> <div class="remember-btn" align="center"> <input type="checkbox" value="true" checked="checked" name="session[remember_me]" id="session_remember_me"><span>记住我</span> </div> <div id="error_box"><br></div> <div class="input_box"> <input class="btn-a" value="登录" type="submit" onclick="myLogin()"> <span style="display: none" id="login_error_msg"></span> </div> <div class="controls bside" style="border: none"> <input value="1" name="remember" id="remember" type="checkbox"> <label for="remember">保存登录信息</label> </div> </div> <div id="footer" style="background-color: transparent;clear:both;text-align:center;">版权 . duym@jzx</div> </div> </div> <script> document.getElementById("demo").innerHTML=Date(); document.write(Date()) </script> </body> </html>
css代码:
body{ background-image:url(http://pic.58pic.com/58pic/11/54/86/32y58PICBe5.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; } div.box{ margin-left:600px ; border-style: groove; margin-right: 600px; text-align: center; color: cornsilk; border-radius: 150px; padding: 10px; border-width: 20px; bottom: 100px; } .btn-a{ font-size: 30px; font-family: 幼圆; color: brown; height:40px; width: 200px; border-radius: 5px; background-color: cadetblue; } #error_box{ color: red; } h1{ color: chartreuse; font-family: 华文隶书; font-size: 100px; text-align: center; } #uname{ border-radius: 10px; } #upass{ border-radius: 10px; }