【前端教程】从基础到优化：一个登录页面的完善过程

最近做了一个简单的登录页面，主要练习了文本框的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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/diannao/99101.shtml
繁体地址，请注明出处：http://hk.pswp.cn/diannao/99101.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！