登陆切换

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）

账号登陆：
验证码登录：