JS复习作业：个人总结注意事项，登录页面，登录验证【诗书画唱】
设计登录页面，利用文本框的onfocus与onblur事件实现登录验证，假定登录时的用户名是admin,密码是8088
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>诗书画唱</title>
<style>
#all{
margin: 0 auto;
/*border: 1px solid red;*/
/*width: 800px;
height: 800px; */
text-align: center;
}
#button{
color: white;
background-color:red ;
width: 50px;
}
</style>
<script>
//
//var uname=document.getElementById("uname");
//var pwd=document.getElementById("pwd");要写在function里面,
//
//不可写成var uname=document.getElementById("uname").value;,要写分开写成
//var uname=document.getElementById("uname")和
//uname.value
//不然会没效果
//onblur事件是指会在对象失去焦点时发生,比如点击本身绑定onblur事件的文本框外的alter,input等,
//所以这里不可在onblur等方法的if判断中中用onblur事件,会点"确定"后触发onblur事件,进而alter弹出框会一直出现
//onfocus 事件在对象获得焦点时发生,比如点击本身绑定onfocus 事件的文本框
function a(){
var uname=document.getElementById("uname");
var pwd=document.getElementById("pwd");
if(uname.value=="admin")
{document.getElementById("unameTiShi").innerHTML="用户名输入正确"}
else if(uname.value!="admin"){document.getElementById("unameTiShi").innerHTML="用户名输入错误"}
}
function b(){
var uname=document.getElementById("uname");
var pwd=document.getElementById("pwd");
if(pwd.value=="8808")
{document.getElementById("pwdTiShi").innerHTML="密码已输入正确"}
else if(pwd.value!=="8808"){document.getElementById("pwdTiShi").innerHTML="密码已输入错误"}
}
function dengLu(){
if(uname.value=="admin"&&pwd.value=="8808")
{alert("登录成功")}
else{ alert("登录失败")}
}
</script>
</head>
<body>
<div id="all" >
<input type="text" placeholder="邮箱/用户名/已验证手机" id="uname" onblur="a()" value=""/>
<font id="unameTiShi" color="blue">请输入正确用户名</font><br /><br /><br />
<input type="password" placeholder="密码" id="pwd" onblur="b()" value=""/>
<font id="pwdTiShi" color="blue">请输入正确的密码</font><br />
<br /><br />
<input type="button" onclick="dengLu()" value="登录" id="button">
</div>
</body>
</html>
