需求说明:
短信验证码功能,有 一个输入框,一个发送按钮。一个项目中很多地方都会使用。
为提高代码复用性。封装成对象。需要的验证码功能的地方,直接引入类。传入参数,初始化就行。这里做一个笔记,以便日后查找
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);
}});
}
}