手机获取验证码插件

最近把手机验证码的前端部分写成了个插件，方便以后调用，分享出来给大家看看

html：

<form class="js-ajax-form" action="{:url('login')}" method="post">
      <div class="item">
         <input type="text" class="mobile" name="mobile" placeholder="请输入手机号">
      </div>
      <div class="item">
          <input type="text" class="code" name="code" placeholder="请输入验证码">
          <a href="javascript:;" class="get-code" id="get-code">获取验证码</a>
          <p class="tip-msg"></p>
      </div>
      <div class="item">
          <button class="user-btn user-reg-btn js-ajax-submit" type="submit">登录</button>
      </div>
</form>

js调用：

//发送验证码，必须是id，并且是on监听事件
$(document).on('click','#get-code',function(){
   var mobile = $('.mobile').val();
   var url = "{:url('getTelCode')}";
   $(this).yfsms({
      url : url,
      phone : mobile,
      error : function(data){
             $('.tip-msg').show();
                    $('.tip-msg').html(data.msg);
             }
      })
})

插件代码：

/*
验证码插件
myh-2019-0507
注意必须是id
*/

;(function($){
    var methods = {
        init : function (options){
            return this.each(function(){
                var $this = $(this);

                //默认参数
                var defaults = {
                    url : '', //服务器地址
                    phone : '', //手机号
                    time : 120,//默认120秒倒计时
                    color : '#50CF7B', //按钮颜色
                    error : '',//回调函数
                }

                //全局变量
                var yf = {
                    code : 1,
                    msg : '',//提示信息
                    maxtime : defaults.time, //记录最大的时间
                    id : $this.attr('id'),//id
                    timer : null  //定时句柄
                }

                $this.settings = $.extend({},defaults,options);

                //初始化页面
                $this.initHtml = function(){
                    //判断手机
                    var reg = /^1[0-9]{10}$/;
                    if(!reg.test($this.settings.phone)) {
                       yf.msg = '手机格式不正确';
                       yf.code = 0;
                    }

                    //服务器地址
                    if($this.settings.url == ''){
                        yf.msg = 'url不能为空';
                        yf.code = 0;
                    }
                    
                    //有自定义回调就使用自定义回调
                    if($this.settings.error != undefined && (typeof $this.settings.error) == 'function'){
                        //{code:yf.code,msg:yf.msg}这是返回的参数
                        if(yf.code == 0) $this.settings.error.call($this,{code:yf.code,msg:yf.msg});
                    }else{
                        if(yf.code == 0) $this.error.call($this);
                    } 

                    if(yf.code){
                        //调用服务器获取验证码
                        $.ajax({
                            type: "POST",
                            url: $this.settings.url,
                            data: {tel:$this.settings.phone},
                            dataType: "json",
                            success: function (data) {
                                if(data == 1000){//注意这里的返回值，根据你服务器返回的值进行修改
                                    yf.timer = setInterval(function(){$this.timer.call($this)},1000);
                                }
                                if(data == 0){
                                    alert('发送失败');
                                }
                            },
                            error: function() {
                                alert('网络故障')
                            }
                        });
                    }
                }

                //默认错误提示
                $this.error = function(){
                    return alert(yf.msg);
                }

                $this.timer = function(){
                    var msg = '('+$this.settings.time+')秒重新获取';
                    if($this.settings.time >= 0){ 
                        $this.css({"background":"#999"});//改变按钮背景色
                        $this.html(msg);//改变文字
                        $this.removeAttr('id'); //删除id，防止重复点击                
                        --$this.settings.time; //秒数自减
                    }   
                    else{   
                        clearInterval(yf.timer);   
                        $this.settings.time = yf.maxtime;
                        $this.attr('id',yf.id);
                        $this.html('获取验证码');
                        $this.css({"background":$this.settings.color});
                    }  
                }
           
                $this.initHtml.call($this);
            })
        }
    }

    $.fn.yfsms = function(method){
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('The method ' + method + ' does not exist in $.yfsms');
        }
    }

})(jQuery);

    

这里需要注意的是服务器端的返回值，大概在64行，你需要在里面修改成你的返回值。