找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发登录获取验证码倒计时完整版

2018-12-20 分类：教程 阅读(855) 评论(0)
微信服务号前端开发教程
h5微信公众号前端开发教程
微信公众号前端怎么开发

html 代码

<!DOCTYPE html>
    <head>
        <meta
            name=”viewport”
            content=”initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width”
            charset=”utf-8″
        />
        <title></title>
    </head>
    <body>
        <input id=”phone” type=”tel” placeholder=”手机号” maxlength=”11″ />
        <div>
            <input
                type=”text”
                placeholder=”验证码”
                id=”verifyCode”
                maxlength=”6″
            />
            <span onclick=”getWord()” id=”getVerify”>获取验证码</span>
        </div>
        <div id=”submit”>提交</div>
    </body>
    <script src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script>
    <script>
        $(function() {
            // 获取验证码
            $(‘#getVerify’).bind(‘click’, function() {
                if ($(‘#getVerify’).text() != ‘获取验证码’) return
                var phoneCode = $(‘#phone’).val()
                if (phoneCode.length == 0) {
                    alert(‘请输入手机号’)
                    return
                }
                var phone = /^(13[0-9]|147|15[012356789]|17[678]|18[02356789])[0-9]{8}$/
                if (!phone.test(phoneCode)) {
                    alert(‘请输入正确的手机号’)
                    return
                }
                // 倒计时
                countDownTime()
                // 与后台交互
                // var formData = {
                // “telNo” : phoneCode
                // };
                // httpSendRequest(“app/user/sendCode”,formData,”,function(data){
                // if (data && data.result == 0) {
                // $alert(“验证码已发送”);
                // } else {
                // $alert(data.data);
                // }
                // });
            })
            //验证码获取倒计时
            function countDownTime() {
                $(‘#getVerify’).html(‘请60秒后重新获取’)
                var waitTime,
                    currTime = 59
                var interval = setInterval(function() {
                    timeChange(currTime)
                    currTime–
                    if (currTime < 0) {
                        clearInterval(interval)
                        currTime = waitTime
                    }
                }, 1000)
            }
            //倒计时显示
            function timeChange(waitTime) {
                if (waitTime != 0) {
                    $(‘#getVerify’).html(‘请’ + waitTime + ‘秒后重新获取’)
                } else {
                    $(‘#getVerify’).html(‘获取验证码’)
                }
            }
            $(‘#submit’).bind(‘click’, function() {
                var verifyCode = $(‘#verifyCode’).val() //验证码
                var phoneCode = $(‘#phone’).val() //电话号码
                var phone = /^(13[0-9]|147|15[012356789]|17[678]|18[02356789])[0-9]{8}$/
                if (!phone.test(phoneCode)) {
                    alert(‘请输入正确的手机号’)
                    return
                }
                if (verifyCode.length == 0) {
                    alert(‘请输入验证码’)
                    return
                }
                //第三方登录绑定
                // var loginFlag = localStorage.getItem(“loginFlag”);
                // if(loginFlag == 2){
                // //QQ登录
                // qqBind(phoneCode,verifyCode);
                // }else if(loginFlag == 3){
                // //微信登录
                // wechatBind(phoneCode,verifyCode);
                // }else if(loginFlag == 4){
                // //微博登录
                // sinaBind(phoneCode,verifyCode);
                // }
            })
            //QQ交互
            // function qqBind(phoneCode,verifyCode){
            // var openKey = localStorage.getItem(“accessToken”);
            // var appId = localStorage.getItem(“openId”);
            // var formData = {
            // “telephone” : phoneCode,
            // “code” : verifyCode,
            // “openId” : appId,
            // “openKey” : openKey
            // };
            // httpSendRequest(“app/user/addAndBind”,formData,”,function(data){
            // if (data && data.result == 0) {
            // $alert(“绑定成功！”);
            // var win = app.createWindow();
            // win.open(“index.html”);
            // }else if(data && data.result == 10002){//未绑定用户
            // noRegister()
            // }else {
            // $alert(data.data);
            // }
            // });
            // }
            // 微信交互
            // function wechatBind(phoneCode,verifyCode){
            // var token = localStorage.getItem(“loginToken”);
            // var uid = localStorage.getItem(“wechatUid”);
            // var formData = {
            // “telephone” : phoneCode,
            // “code” : verifyCode,
            // “uid” : uid,
            // “token” : token
            // };
            // httpSendRequest(“app/user/weixinBind”,formData,”,function(data){
            // if (data && data.result == 0) {
            // $alert(“绑定成功！”);
            // var win = app.createWindow();
            // win.open(“index.html”);
            // }else if(data && data.result == 10002){//未绑定用户
            // noRegister()
            // }else {
            // $alert(data.data);
            // }
            // });
            // }
            // 微博交互、
            // function sinaBind(phoneCode,verifyCode){
            // var uid = localStorage.getItem(“sinaUid”);
            // var token = localStorage.getItem(“loginToken”);
            // var formData = {
            // “telephone” : phoneCode,
            // “code” : verifyCode,
            // “uid” : uid,
            // “token” : token
            // };
            // httpSendRequest(“app/user/weiboBind”,formData,”,function(data){
            // if (data && data.result == 0) {
            // $alert(“绑定成功！”);
            // var win = app.createWindow();
            // win.open(“index.html”);
            // }else if(data && data.result == 10002){//未绑定用户
            // noRegister()
            // }else {
            // $alert(data.data);
            // }
            // });
            // }
        })
    </script>
</html>
微信开发前端配置
微信前端开发岗位职责
前端微信公众号开发
赞(0)
前端开发者 » 前端开发登录获取验证码倒计时完整版
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论