layui页面发送手机验证码（一）前端

原型图：：

发送短信验证码 layuiAdmin有封装好的js
在admin.js中

//发送验证码
    ,sendAuthCode: function(options){
      options = $.extend({
        seconds: 60
        ,elemPhone: '#LAY_phone'
        ,elemVercode: '#LAY_vercode'
      }, options);

      var seconds = options.seconds
      ,token = null
      ,timer, countDown = function(loop){
        var btn = $(options.elem)
        seconds--;
        if(seconds < 0){
          btn.removeClass(DISABLED).html('获取验证码');
          seconds = options.seconds;
          clearInterval(timer);
        } else {
          btn.addClass(DISABLED).html(seconds + '秒后重获');
        }

        if(!loop){
          timer = setInterval(function(){
            countDown(true);
          }, 1000);
        }
      };

      $body.on('click', options.elem, function(){
        options.elemPhone = $(options.elemPhone);
        options.elemVercode = $(options.elemVercode);

        var elemPhone = options.elemPhone
        var elemVercode = options.elemVercode
        ,value = elemPhone.val()  //手机号
        ,vercode = elemVercode.val();//此处我加入图片验证码校验

        if(seconds !== options.seconds || $(this).hasClass(DISABLED)) return;

        if(!/^1\d{10}$/.test(value)){
          elemPhone.focus();
          return layer.msg('请输入正确的手机号')
        };

        if(typeof options.ajax === 'object'){
          var success = options.ajax.success;
          delete options.ajax.success;
        }

        admin.req($.extend(true, {
          url: '/sendCode'//自己接口
          ,type: 'get'
          ,data: {
                cellphone: value,//手机号
                vercode: vercode,//短信验证码
                uuid :$("#uuid").val()//此处我生成的uuid
          }
          ,success: function(res){
              if(res.code==0){
                  layer.msg('验证码已发送至你的手机，请注意查收', {
                      icon: 1
                      ,shade: 0
                  });
                  options.elemVercode.focus();
                  countDown();
                  success && success(res);
              }else {

                  //提示登录失败
                  layer.msg(res.msg, {
                      offset: '15px'
                      ,icon: 1
                      ,time:1000
                  });

                  //刷新验证码
                  $("#LAY-user-login-vercode").val("");
                  $("#LAY-user-get-vercode").attr("src","/vcode.jpg?t="+ new Date().getTime());
              }

          }
        }, options.ajax));
      });
    }

//页面中

//发送短信验证码
  admin.sendAuthCode({
    elem: '#LAY-user-forget-getsmscode'
    ,elemPhone: '#LAY-user-login-cellphone'
    ,elemVercode: '#LAY-user-login-vercode'
      //在admin.js中发送ajax
  });

校验验证码 以及 重置密码

//找回密码下一步
  form.on('submit(LAY-user-forget-submit)', function(obj){
    var field = obj.field;
      var mobile = field.cellphone;
    //请求接口
    admin.req({
      url: '/checkCode' //实际使用请改成服务端真实接口
      ,data: field
      ,done: function(res){
          if (res.data.request){
              location.hash = router.href + '/type=resetpass/mobile='+mobile;
          }else {
              layer.msg("短信验证码不正确", {icon: 5});
          }
      }
    });

    return false;
  });

  //重置密码
  form.on('submit(LAY-user-forget-resetpass)', function(obj){
    var field = obj.field;

      var router = layui.router();

    field.mobile = router.search.mobile
    //确认密码
    if(field.password !== field.repass){
      return layer.msg('两次密码输入不一致');
    }

    //请求接口
    admin.req({
      url: '/resPassword' //实际使用请改成服务端真实接口
      ,data: field
      ,done: function(res){        
        layer.msg('密码已成功重置', {
          offset: '15px'
          ,icon: 1
          ,time: 1000
        }, function(){
          location.hash = '/user/login'; //跳转到登入页
        });
      }
    });

    return false;
  });