js學習筆記：用戶註冊

時間 2019-11-13

原文原文鏈接

用戶註冊：結構層：html;表現層：css;行爲層：javascript;
html利用ul,li來構造：
注意事項：一、每一個Input都要有相應的id,這是在js中去調用的。
二、<a href="javascript:void(0)"></a>，添加javascript:void(0)是爲了阻止連接的跳轉。javascript

<body>
<div id="reg">
<form>
<div class="reg_title"><h1>用戶註冊</h1></div>
<ul class="reg_con">
<li>
<ul class="def">
<li>用戶賬號：<input type="text" id="uname"/></li>
<li>給本身起個名字吧，它將成爲您登陸本站的用戶名</li>
</ul>
</li>
<li>
<ul class="def">
<li>電子郵箱：<input type="text" id="email"/></li>
<li>請輸入您的經常使用郵箱地址，此郵箱地址將做爲修改密碼</li>
</ul>
</li>
<li>
<ul class="def">
<li>手機號碼：<input type="text" id="mobile"/></li>
<li>請輸入您的手機號碼，方便咱們之間的聯繫</li>
</ul>
</li>
<li>
<ul class="def">
<li>安全密碼：<input id="pwd" type="password"/></li>
<li>請輸入安全密碼，它將做爲您的登陸密碼</li>
</ul>
</li>
<li>
<ul class="def ">
<li>確認密碼：<input type="password" id="qrpwd"/></li>
<li>請將上面的密碼再輸入一次</li>
</ul>
</li>
<li>
<ul>
<li></li>
<li id="reg_sub"><a href="javascript:void(0)" id="enter">當即註冊</a></li>
</ul>
</li>
</ul>
</form>
</div>
</body>

複製代碼

表現層：css
注意事項：一、頁面開始通常都寫上重置代碼。
二、針對用戶名、輸入框、提示圖標要寫一組自己的樣式、一組def默認的樣式、一組point得到焦點的樣式、一組error錯誤樣式、一組ok輸入正確的樣式。css

/*reset重置代碼開始*/

行爲層：js
js編寫的主體思路：一、中心點：每個input框，也就是獲取的inp=document.getElementsByTagName("input");
                     二、針對input輸入框會有點擊即得到焦點的狀態，和失去焦點的狀態。
                     三、當得到焦點的時候，會給用戶名、輸入框、提示圖標（改變背景圖片的位置）變成藍色，即添加point樣式。
                     四、當input輸入框失去焦點時，會給用戶名、輸入框、提示圖標變成紅色，即添加error樣式。
                     五、當input輸入框內容正確後，會給用戶名、輸入框變成。html