js、html實現驗證碼登錄與賬號登錄之間的切換

在近期的項目中遇到的一些有意思的點分享給大家。
第一個就是關于驗證碼登錄與賬號登錄之間的切換問題，我是直接去看了美團網的源碼，發現其實現的方式很簡單。

主要的方法就是定義兩個表單。一個是驗證碼登錄的表單A，一個是賬號登陸的表單B。A的display值先為none，B為正常的值。再要切換登陸方式的時候，使用js將B的display值改為none,A為正常值（block/inline-block）。

具體看代碼：

<div class="login"><form id="formTel">賬號：<input id="telForTel" type="text" placeholder="電話號碼" /><br>密碼：<input id="pwdForTel" type="password" /><br><input class="submitForTel" type="submit" value="登錄"><input class="cancel" type="button" value="取消登錄"></form><!-- display:none --><form id="formMsg" onsubmit="userLoginForMsg()">電話號碼：<input id="telForMsg" type="text" /><br>驗證碼：<input id="securityCode" type="text" placeholder="請輸入驗證碼" /><input type="button" value="獲取驗證碼" /><br><input class="submitForMsg" type="submit" value="登錄"><input class="cancel" type="button" value="取消登錄"></form><div class="way"><span class="forMsg" onclick="loginChangeForMsg()">驗證碼登陸</span><!-- display:none --><span class="forTel" onclick="loginChangeForTel()">賬號登錄</span><span class="forgetPwd">忘記密碼</span></div></div> <!--上半部分是表單，下半部分為切換表單的按鈕，記得對應的按鈕也要隱藏-->

css部分：

#formTel {display: block;}.forMsg {display: inline-block;}#formMsg,.forTel {display: none;} /*標簽名可以設置的通俗易懂些，不要弄混淆了*/

js部分：

//密碼登錄切換至驗證碼登錄函數function loginChangeForMsg() {var msgForm = document.getElementById("formMsg");var telForm = document.getElementById("formTel");var forTel = document.getElementsByClassName("forTel")[0];var forMsg = document.getElementsByClassName("forMsg")[0];msgForm.style.setProperty("display", "block", "important");telForm.style.setProperty("display", "none", "important");forTel.style.setProperty("display", "inline-block", "important");forMsg.style.setProperty("display", "none", "important");}//驗證碼登錄切換至密碼登錄函數function loginChangeForTel() {console.log("切換至賬號登錄");var msgForm = document.getElementById("formMsg");var telForm = document.getElementById("formTel");var forTel = document.getElementsByClassName("forTel")[0];var forMsg = document.getElementsByClassName("forMsg")[0];msgForm.style.setProperty("display", "none", "important");telForm.style.setProperty("display", "block", "important");forTel.style.setProperty("display", "none", "important");forMsg.style.setProperty("display", "inline-block", "important");} //注意這里一定要使用setProperty()方法改變樣式，只有這個方法可以設置css權重（!important）

賬號登陸：
驗證碼登錄：

總結

以上是生活随笔為你收集整理的登陆切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。