【前端教程】从基础到优化：一个登录页面的完善过程
最近做了一个简单的登录页面，主要练习了文本框的onfocus与onblur事件的使用。虽然功能实现了，但仔细想想还有不少可以改进的地方。今天就来分享一下这个登录页面的开发过程和优化思路。
初始实现与解析
先来看一下最初的实现代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>诗书画唱</title><style>#all{margin: 0 auto;text-align: center;}#button{color: white;background-color: red;width: 50px;}</style><script>function a(){var uname=document.getElementById("uname");if(uname.value=="admin"){document.getElementById("unameTiShi").innerHTML="用户名输入正确";} else if(uname.value!="admin"){document.getElementById("unameTiShi").innerHTML="用户名输入错误";}}function b(){var pwd=document.getElementById("pwd");if(pwd.value=="8808"){document.getElementById("pwdTiShi").innerHTML="密码已输入正确";} else if(pwd.value!=="8808"){document.getElementById("pwdTiShi").innerHTML="密码已输入错误";}}function dengLu(){// 注意：这里存在bug，uname和pwd未定义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 /><i