JavaScript 基础,登录前端验证
<script></script>的三种用法:
- 放在<body>中
- 放在<head>中
- 放在外部JS文件中
- 三种输出数据的方式:
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 window.alert() 弹出警告框。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 "id" 属性来标识 HTML 元素。
- 使用 document.getElementById(id) 方法访问 HTML 元素。
- 用innerHTML 来获取或插入元素内容。
- 登录页面准备:
- 增加错误提示框。
- 写好HTML+CSS文件。
- 设置每个输入元素的id
- 定义JavaScript 函数。
- 验证用户名6-20位
- 验证密码6-20位
- onclick调用这个函数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>脚本</title> <h4>现在的时间是:</h4> <script> document.write("<p>抓紧时间好好学习哟</p>"); </script> </head> <body> <p id="demo"></p> <script> document.write("Hello") document.getElementById("demo").innerHTML=Date(); </script> <br><button type="button" onclick=window.alert("错啦错啦")>登录</button> </body> </html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录</title> <link href="../static/login.css" rel="stylesheet" type="text/css"> <script> function myLogin(){ var uName=document.getElementById("username"); var uError=document.getElementById("error_box"); if(uName.value.length<6){ uError.innerHTML="用户名至少6位!" } if(uName.value.length>20){ uError.innerHTML="用户名至多20位!" } } </script> </head> <body bgcolor="#faebd7"> <div class="div1"> <div class="div2">登录</div> <div class="div3"> 用户:<input id="username" type="text" placeholder="请输入昵称"> </div> <div class="div3"> 密码:<input id="userpass" type="text" placeholder="请输入密码"> </div> <div id="error_box"><br></div> <div class="div3"> <button onclick="myLogin()">Login</button> </div> <div class="div2">byYIN</div> </div> <br> </body> </html>
div{ margin: 0 auto; text-align: center; background-color: lightpink; } .div1{ width: 350px; height: 250px; border-color: lightpink; border-style: groove; border-width: 2px; margin-top:100px ; } .div2{ font-family: 方正清刻本悦宋简体; border-bottom-style: groove; border-bottom-width: 2px; line-height: 30px; background-color: hotpink; } .div3{ font-family: 幼圆; width: 350px; height: 50px; font-size: 18px; align:"center"; }
![](https://images2017.cnblogs.com/blog/1232595/201710/1232595-20171027124937773-538931107.png)
![](https://images2017.cnblogs.com/blog/1232595/201710/1232595-20171027125009930-1356544422.png)
![](https://images2017.cnblogs.com/blog/1232595/201710/1232595-20171027125016351-803259246.png)