vercode.js封装笔记

    xiaoxiao2022-07-03  136

    需求说明:

    短信验证码功能,有 一个输入框,一个发送按钮。一个项目中很多地方都会使用。

    为提高代码复用性。封装成对象。需要的验证码功能的地方,直接引入类。传入参数,初始化就行。这里做一个笔记,以便日后查找

    vercode.js代码如下

    //定义验证码对象

    function Vercode(){

    //输入框名字

    this.input='';

    // button

    this.btn='';

    //send interface

    this.scope='';

    }

    Vercode.prototype={

    //初始化

    init:function(){

    //数据校验

    if(this.ckdata()==false){

    return;

    }

    //绑定

    this.bindEvent();

    },

    //检查数据

    ckdata:function(){

    if(this.input !='' && this.btn !='' && this.scope != ''){

    return true;

    }

    return false;

    },

    //绑定事件

    bindEvent:function(){

    var that=this;

    $(this.btn).on({'click':function(){

    //检查输入信息

    if($(that.input).val() == "" || isNaN($(that.input).val()) || $(that.input).val().length != 11 ){

    $(that.input).focus();

    alert("请填写正确的手机号!");

    return;

    }

    $(that.btn).addClass("btnnouse");

    var time = 60;

    $(that.btn).attr("disabled", true);

     

    //发送ajax请求

    var param=$(that.input).val();

    var url=that.scope;

    var data={

    'phonenumber':param

    };

    $.post(url,data,function(res){

    if(res.data==1){

    alert('短信发送成功,请查收');

    }else if(res.data==-1){

    alert('操作过于频繁,请稍后再试');

    }else{

    alert('未知错误');

    }

    },'json');

     

    var timer = setInterval(function() {

    if (time == 0) {

    clearInterval(timer);

    $(that.btn).attr("disabled", false);

    $(that.btn).val("获取验证码");

    $(that.btn).removeClass("btnnouse");

    } else {

    $(that.btn).val(time + "秒");

    time--;

    }

    }, 1000);

    }});

    }

    }

    最新回复(0)