JavaScript 基础，登录验证
- <script></script>的三种用法：
- 放在<body>中
- 放在<head>中
- 放在外部JS文件中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsDemo</title> </head> <body> <p id="demo">ppp</p> <script> //document.write(Date()) document.getElementById("demo").innerHTML=Date(); </script> <button type="button" onclick=window.alert("number")>input</button> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsDemo</title> <script> function displayDate(){ document.getElementById("demo").innerHTML=Date(); } </script> </head> <body> <p id="demo">ppp</p> <button type="button" onclick=window.alert("number")>input</button> </body> </html>
mySript.js文件: function myFunction(){ document.getElementByld("demo").innerHTML="我的第一个JavaScript函数"; }
- 三种输出数据的方式：
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 window.alert() 弹出警告框。
- 使用 innerHTML 写入到 HTML 元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsDemo</title> </head> <body> <p id="demo">ppp</p> <script> //document.write(Date()) document.getElementById("demo").innerHTML=Date(); </script> <button type="button" onclick=window.alert("number")>input</button> </body> </html>
- 登录页面准备：
- 增加错误提示框。
- 写好HTML+CSS文件。
- 设置每个输入元素的id
- 定义JavaScript 函数。
- onclick调用这个函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆</title>
<link href="../static/css/denglu.css" rel="stylesheet" type="text/css">
<script>
function fnLogin() {
var oUname=document.getElementById("uname")
var oError=document.getElementById("error_box")
var oUpass=document.getElementById("upass")
if(oUname.value.length<6||oUname.value.length>20){
oError.innerHTML="用户名6-20位"
}
if(oUpass.value.length<6||oUpass.value.length>20){
oError.innerHTML="密码6-20位"
}
if((oUname.value.length<6||oUname.value.length>20)&&(oUpass.value.length<6||oUpass.value.length>20)){
oError.innerHTML="用户名密码要求6-20位"
}
}
</script>
</head>
<body>
<div class="box">
<h2>广州商学院</h2>
<h3>登录</h3>
<div class="input_box">
<input id="uname" type="text" placeholder="请输入用户名" style="width:300px">
</div>
<div class="input_box">
<input id="upass" type="password" placeholder="请输入密码" style="width:300px">
</div>
</div>
<br>
<div id="error_box"><br></div>
<div class="input_box">
<button onclick="fnLogin()">登陆</button><br>
<a class="link-forget cl-link-blue"href="get_password.html">忘记密码</a>
<a class="link-forget cl-link-blue"href="index.php?type=login">注册</a>
</div>
</div>
<script>
window.alert("go")
</script>
</body>
</html>
css
body{ background: paleturquoise; padding-right:200px; padding-left:200px; color: #FFA500; padding-top: 40px; font-size: 16px; background: blanchedalmond; font-family:verdana,Arial,Helvetica,sans-serif; } h2{ padding-left: 100px; } h3{ padding-left: 80px; }
onclick
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script> function a() {alert('错错错')} </script> </head> <body> <input id="input_box" type="button" value="点击进入"onclick="a()"> </body> </html>
