【前端教程】從基礎到優化：一個登錄頁面的完善過程

最近做了一個簡單的登錄頁面，主要練習了文本框的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
英文地址，請注明出處：http://en.pswp.cn/diannao/99101.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！