码云笔记前端博客
Home > JavaScript > javascript实现手机端获取验证码邀请领取红包实例

javascript实现手机端获取验证码邀请领取红包实例

2018-09-03 分类:JavaScript 作者:管理员 阅读(250)

本文共计4507个字,阅读时间预计12分钟,干货满满,记得点赞加收藏哦

这是我之前做的一个公司的移动端项目,很简单的一个表单验证,要求就是老用户通过一个邀请链接方式发送到未注册的用户,用户通过输入手机号码获取到验证码,达到领取红包的一个操作,具体方法分享给大家,不喜勿喷,只是希望有和我一样需求的读者们能够有所帮助,废话不多说,接下来往下看效果图:

Js实现手机端获取验证码邀请领取红包实例

因为这个是要嵌入到微信公众号的,所以实现方式是通过HTML5来完成的。

HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<section>
    <div id="regPicture">
        <div class="photo">
            <img id='pic' src="../redpacket/images/default.png" />
        </div>
        <p class=" invite ">接受"<span class="userName" id="userName">XX</span>"邀请,体验XX</p>
        <p class="getCoupon">即可获得<span class="redNum">100</span>元红包</p>
    </div>
</section>
<section class="forminter">
    <form id="registerForm" action="" method="post" name="form1">
        <input type="text" placeholder="输入手机号接受邀请" id="mobile" /><br />
        <input type="text" placeholder="输入验证码" id="enterCode" />
        <input type="button" id="btnSendCode" class='btnSendCode' value="获取验证码" /><br />
        <input type="button" value="领取红包" id="receiveCoupon" />
    </form>
    <div id="bg"></div>
    <div id='alert' class="alert">
        <p id='msg' class="msg"></p>
        <button id='alertBtn' class="alertBtn"></button>
    </div>
</section>
<footer id="footer">
    <div id="logo"><img src="../redpacket/images/icon@3x.png"></div>
    <div id="download">
        <a href="#">下载客户端</a>
    </div>
</footer>

这里给大家补充一下HTML5的新的表单特性

新的form属性:

Autocomplete属性规定form或input域应该拥有自动完成功能。

autocomplete适用于<form>标签,以及以下类型的<input>标签:text,search,url,telephone,email,password,datepickers,range以及color。

当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:

1
2
3
4
5
6
<form action="demo_form.asp" method="get" autocomplete="on">
    First name: <input type="text" name="fname" /><br />
    Last name: <input type="text" name="lname" /><br />
    E-mail: <input type="email" name="email" autocomplete="off" /><br />
    <input type="submit" />
</form>

placeholder属性

placeholder属性提供一种提示(hint),描述输入域所期待的值。

注释:placeholder属性适用于以下类型的<input>标签:text,search,url,telephone,email以及password。

提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失:

1
<input type="text" placeholder="输入手机号接受邀请" id="mobile" />

接下来就是JavaScript代码部分,这里我们需要掌握的是正则表达式判断手机号码以及验证码的方法,还有就是setTimeout()方法的使用。

JavaScript代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
var InterValObj; //timer变量,控制时间  
var count = 60; //间隔函数,1秒执行  
var curCount; //当前剩余秒数  
var option = {};
//定义一个检测手机号码的函数,通过正则表达式判断用户输入的手机号码是否正确
function validatemobile(mobile) {
    var reg = /^((13[0-9])|(15[^4])|(18[0,2,3,5-9])|(17[0-8])|(147))\d{8}$/;
    if(!reg.test(mobile)) {
        return false;
    }
    return true;
}
//通正则检测验证码输入的正确与否
function validateCode(code) {
    if(code == null || code.length != 6) {
        return false;
    }
    return true;
}
//这里是弹框的实现,这个我想大家都会,没的说
function showAlert(msg, btnMsg, callback) {
    $('#msg').html(msg);
    $('#alertBtn').html(btnMsg);
    if(!$.isFunction(callback)) callback = function(){};
    document.getElementById("bg").style.display = "block";
    document.getElementById("alert").style.display = "block";
    $('#alertBtn').off('click');
    $('#alertBtn').on('click',function(){
        document.getElementById("bg").style.display = "none";
        document.getElementById("alert").style.display = "none";
        callback();
    });
}
//这个函数方法是用来判断链接在什么设备上打开从而下载/打开App
function downloadApp(){
    if (ua.windowsPhone) return; //windowsphone不支持  
         
   
    if (ua.weChat && ua.iOS) { //iOS上的微信webview  
        return ;  
    } else if (ua.weChat && ua.android) { //安卓上的微信webview  
        return ;  
    } else if (ua.windowsPhone) {//winphone不支持  
        return ;  
    } else { //非微信方式打开
        if ((ua.UC && ua.android && !ua.u3 && !ua.chrome)) {  //浏览器不支持  
            return ;  
        } else {              
            timeoutRedirect();  
        }  
    }  
}
//因为我们是通过用户来邀请用户点击参与活动的,当然少不了获取邀请人的信息。
function getRecommendinfo() {
    $.post('http://192.168.2.66:8066/index.php?r=expert/login/recommendinfo', option, function(result) {
        if(!result || !result.data) return; //服务器返回数据为空时的提示 mark
        var image = result.data.image || null;
        var name = result.data.name || null;
        var nameControl = $('#userName');
        var imageControl = $('#pic');
        if(nameControl && name) nameControl.html(name);
        if(imageControl && image) imageControl.attr('src', image);
    });
}
这个函数方法是用来获取验证码的,通过调用上边我们写的validatemobile()方法来判断用户输入的手机号码判断正确性。
function sendMessage() {
    option.mobile = document.getElementById("mobile").value;
    if(!validatemobile(option.mobile)){//调用上边的方法验证手机号码的正确性  
        $("#mobile").attr('class','bgColor');
        showAlert('请输入正确的手机号!','重新输入', function(){
            $('#mobile').val('');
            $('#mobile').attr('class','');
        });
        return;
    }
    //向后台发送处理数据  
    $.ajax({   
        url: 'http://192.168.2.66:8066/index.php?r=expert/common/pushmsg',  
        data: option,
        type: "POST",
        dataType: "json",
        success: function(result) {
            if(!result || result.errorCode != 0){
                showAlert('获取失败!','稍后重试');
            }
            curCount = count;
            $("#btnSendCode").attr('class','btnDisabledSendCode');
            $("#btnSendCode").attr("disabled","true"); //禁用按钮  
            $("#btnSendCode").val("(" + curCount + "s)后重新发送");
            InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次  
        },
        error:function(result){
            showAlert('获取失败!','稍后重试');
        }
    });
}
//领取红包这一块我们需要先获取到手机号码mobile与enterCodede 的value值,通过之前写的validatemobile()和validateCode()方法来判断手机号与验证码输入的正确性
function receiveCoupon() {
    option.mobile = document.getElementById("mobile").value;
    option.authcode = document.getElementById("enterCode").value;
   
    if(!validatemobile(option.mobile)){//调用上边的方法验证手机号码的正确性  
        $("#mobile").attr('class','bgColor');
        showAlert('请输入正确的手机号!','重新输入', function(){
            $('#mobile').val('');
            $('#mobile').attr('class','');
            $('#enterCode').attr('class','');
            $('#enterCode').val('');
        });
        return;
    }
    if(!validateCode(option.authcode)){
        $("#enterCode").attr('class','bgColor');
        showAlert('请输入正确的验证码!','重新输入',function(){
            $('#enterCode').attr('class','');
            $('#enterCode').val('');
        });
        return;
    }
    //向后台发送处理数据  
    $.ajax({      
        url: 'http://192.168.2.66:8066/index.php?r=expert/login/recommendregister',  
        data: option,
        type: "POST",      
        dataType: "json",
        success: function(result) {
            var msg = "红包已经放入您的XX账户中";
            var btnMsg = "立即体验";
//          if(!result || result.errorCode != 0){
//              msg = "领取失败!";
//              btnMsg = "稍后重试";
//              if(result.errorCode == 3){
//                  msg = "验证码错误!";
//                  btnMsg = "重新输入";
//                  $('#enterCode').attr('class','bgColor');
//                  showAlert(msg, btnMsg, function(){
//                      $('#enterCode').val('');
//                      $('#enterCode').attr('class','');
//                  });
//              }
//              showAlert(msg, btnMsg);
//          }else{
                showAlert(msg, btnMsg, downloadApp);
//          }
        },
        error:function(){
            showAlert('领取失败!','稍后重试');
        }
    });
}
//timer处理函数  
function SetRemainTime() {
    curCount--;
    if(curCount <= 0) {
        window.clearInterval(InterValObj); //停止计时器  
        $('#btnSendCode').attr('class','btnSendCode');
        $("#btnSendCode").removeAttr("disabled"); //启用按钮  
        $("#btnSendCode").val("重新获取");
    } else {
        //样式为灰色的样式
    $("#btnSendCode").attr('class','btnDisabledSendCode');
        $("#btnSendCode").attr("disabled","true"); //禁用按钮  
        $("#btnSendCode").val("(" + curCount + "s)后重新发送");
    }
}
/**  
     * 尝试跳转openAppHref,如果跳转失败,进入officialHref  
     */  
    function timeoutRedirect() {  
        var startTime = Date.now();  
        var timeout = 500;  
        openApp();  
        var t = setTimeout(function () {  
            var endTime = Date.now();  
            if (endTime - startTime < timeout + 100) {   //若启动应用,则js会被中断较长时间,超出此范围  
                if (ua.ios9) {   //ios9会弹出确认按钮,时间一定会超出  
                    openH5();    //此处请各位自行处理,暂时没有找到好的办法  
                    return;  
                }  
                openH5();  
            }  
        }, timeout);  
        window.beforeunload = function () {  
            clearTimeout(t);  
        }  
        window.pagehide = function () {  
            clearTimeout(t);  
        }  
        window.onblur = function () {  
            clearTimeout(t);  
        }  
    }  
    function openH5() {  
        window.location.href = officialHref;  
    }  
    function openApp() {  
        if (!openAppHref ) {  
            window.location = officialHref;  
            return ;  
        }  
        if (ua.android || ua.ios9 || ua.chrome18) {  
            window.location = openAppHref;          
            return;  
        }
        var iframe = document.createElement("iframe");  
        iframe.style.display = "none";  
        iframe.style.border = "none";  
        iframe.style.width = "1px";  
        iframe.style.height = "1px";  
        iframe.src = openAppHref;  
        document.body.appendChild(iframe);  
    }

以上就是我在实际项目中用到的方法,希望对读者有所帮助,如果有表达比清楚的地方,请多多包涵。也欢迎大家前来指正。

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(3) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
3

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - javascript实现手机端获取验证码邀请领取红包实例

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 476 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 228 条
  • 链接总数: 15 个
  • 标签总数: 1050 个
  • 建站时间: 525 天
  • 访问总量: 8648306 次
  • 最近更新: 2019年11月21日