×

【每日一学】用JS实现发送短信验证码功能

作者:天空2016.12.22来源:Web前端之家浏览:16020评论:1
关键词:验证码

【每日一学】发送短信验证码功能

<!DOCTYPE html>
<html> 
        <head>
                <meta charset="UTF-8">
                <meta name="viewport" 
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
 />
                <title></title>
 
                <style type="text/css">
                        form.registerForm .r_item {
                                width: 100%;
                                min-height: 40px;
                                overflow: hidden;
                                -webkit-box-sizing: border-box;
                                -moz-box-sizing: border-box;
                                box-sizing: border-box;
                                padding-left: 50px;
                                position: relative;
                                margin-bottom: 15px;
                                line-height: 40px;
                        }
                        
                        form.registerForm .r_item>label {
                                display: block;
                                position: absolute;
                                left: 0;
                                top: 0;
                                width: 48px;
                                height: 40px;
                                line-height: 40px;
                                text-align: right;
                                overflow: hidden;
                                color: #333;
                                font-size: 12px;
                        }
                        
                        form.registerForm .r_item input {
                                width: 98%;
                                height: 40px;
                                -webkit-box-sizing: border-box;
                                -moz-box-sizing: border-box;
                                box-sizing: border-box;
                                border: 1px #ECECEC solid;
                                padding: 0 10px;
                                line-height: 40px;
                                border-radius: 3px;
                                margin-left: 2%;
                        }
                        
                        form.registerForm .special {
                                padding-right: 82px;
                        }
                        
                        form.registerForm .special .send_code {
                                position: absolute;
                                right: 0;
                                top: 0;
                                background: #F85F48;
                                width: 85px;
                                text-align: center;
                                height: 40px;
                                line-height: 40px;
                                color: white;
                        }
                        
                        form.registerForm input[type=submit] {
                                width: 100%;
                                height: 40px;
                                color: white;
                                background: #F85F48;
                                margin-top: 3rem;
                                border:0;
                        }
                </style>
        </head>
 
        <body>
                <form class="registerForm">
                        <div class="r_item">
                                <label for="">手机号:</label>
                                <input type="tel" name="" id="r_tel" 
value="" placeholder="请填写您的手机号码" 
onkeyup="this.value=this.value.replace(/\D/g,'')" maxlength="11" />
                        </div>
                        <div class="r_item special">
                                <label for="">验证码:</label>
                                <input type="tel" name="" id="r_Ver_code" value="" placeholder="短信验证码" />
                                <cite class="send_code">
                  <label class="obtain" style="display: inline-block;">获取验证码</label>
                  <label class="repeat" style="display: 
none;">重新发送<span 
class="count_down">60</span></label>
                </cite>
                        </div>
                        <input type="submit" value="提交" />
                </form>
                <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
                <script type="text/javascript">
                        var $forgetPhonezz = /^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$|17[0-9]{9}$/;
                        $("form.registerForm .special .send_code  .obtain").click(function() {
                                var $r_tel = $('#r_tel').val();
                                if(!$forgetPhonezz.test($r_tel)) {
                                        alert('请输入正确的手机号码')
                                        return false;
                                } else {
                                        //倒计时
                                        $(this).hide();
                                        $("form.registerForm .special .send_code .repeat").css("display", "block");
                                        $('.r_main .popup').css("display", "block").fadeOut(3000);
                                        var time = 60;
                                        var time_f;
                                        time_f = setInterval(function() {
                                                if(time == 1) {
                                                        clearInterval(time_f);
                                                        $("form.registerForm .special .send_code .repeat").hide();
                                                        $("form.registerForm .special .send_code .obtain").show().html("重新获取");
                                                        $("form.registerForm .special .send_code .repeat .count_down").html(60);
                                                } else {
                                                        time--;
                                                        $("form.registerForm .special .send_code .repeat 
.count_down").html(time);
                                                }
                                        }, 1000);
                                }
                        });
                        $('.registerForm').submit(function() {
                                var $r_tel = $('#r_tel').val();
                                var $verification = $.trim($("#r_Ver_code").val());
                                
                                if(!$forgetPhonezz.test($r_tel)) {
                                        alert('请输入正确的手机号码')
                                        return false;
                                }
                                if($verification == "") {
                                        alert('请输入验证码')
                                        return false;
                                }
 
                                return true;
                        });
                </script>
        </body> 
</html>

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/biji003.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表

最新留言

  • 访客

    看你的公司用啥了,其实感觉环境第一位。...

  • Web前端之家

    vue的生态应用在国内很强大,但是react更加适用于中大型公司。...

  • agg151

    感觉在国内,VUE应该要排第一。...

  • qianduan008

    三角形工具一直在用,这个CSS编辑器也很不错,希望继续分享新的前端工具哟!...

  • Web前端之家

    其实还好,但是中大型公司都是在用React。vue比较好入门。...

  • abner

    React比VUE难学啊。...

  • 访客

    多学技术永远是最好的...

  • 访客

    组件应用还是用的多...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.7 Valyria