这是我自己写的一个报名组件，为了编写方便，依赖了JQ，直接上代码。
HTML：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<style>
div{height:1000px;}
form{margin-top:100px;position:relative;}
i{font-style:normal;}
li{height:40px;list-style:none;}
li a{border-radius:4px;border:1px solid #000;padding:5px 10px;font-size:20px;color:#333;text-decoration: none;}
li a:active{background:#eee;}
</style>
</head>
<body>
<form action="" id="join_us">
<ul>
<li>
<i>姓名：</i><input type="text" name="name"/>
</li>
<li>
<i>电话：</i><input type="text" name="mobile"/>
</li>
<li>
<i>地址：</i><input type="text" name="address"/>
</li>
<li>
<a href="javascript:;" class="submit">立即报名</a>
</li>
</ul>
</form>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="../../src/js/modules/commonReg.js"></script>
<script>
$(".submit").click(function(){
//调用报名方法
QuickReg.Rerver("测试报名","#join_us",function(e){
console.log(e);
QuickReg.msg("报名成功！");
});
})
</script>
</body>
</html>commonReg.js：
function RegCommonFun(){
//报名接口地址（此地址为我本地接口，测试时请修改为正确的接口地址）
this.appointment="http://test.signup.com/api/order/appointment";
this.timer=null;
}
/**
* 延迟执行删除节点函数
* @param el 需要移除的节点
* @param time 延迟时间
*/
RegCommonFun.prototype.removeDom=function(el,time){
var runTime=time ? time : 2200;
if(this.timer!=null){
clearTimeout(this.timer);
}
this.timer=setTimeout(function(){
$(el).remove();
},runTime);
};
/**
* 弹出层提示UI
* @param message 弹出层消息
* @param iEl 弹出层元素
*/
RegCommonFun.prototype.tips=function(message,iEl){
var container=$(".reg_layer_tip");
var elTop=iEl.offset().top;
var elLeft=iEl.offset().left;
if(container.length>0){
container.remove();
clearTimeout(this.timer);
}
if(message && typeof message=="string"){
var layerHtml='<div class="reg_layer_tip" style="display:none;top: 150px;left: 50%;width:auto !important;height:auto !important;margin: 0;padding: 0;border-radius:4px;">'+
'<div class="layer_tip_container" style="background:#000001;width:auto !important;height:auto !important;color:white;padding:8px 12px;font-size:12px;border-radius:4px;position:relative;box-shadow: 2px 2px 10px rgba(0,0,0,.3);">'+
' <span>'+message+'</span>'+
' <i class="layer_round_note" style="display:inline-block;position:absolute;bottom:-8px;width:0;height:0; border-top:12px solid #000001;border-left: 12px solid transparent; "></i>'+
'</div>'+
'</div>';
$("body").append(layerHtml);
$(".reg_layer_tip").fadeIn("fast").css({display:"block",position:"absolute",top:elTop-42,left:elLeft});
this.removeDom(".reg_layer_tip");
}
};
/**
* 弹窗提示UI
* @param msg
*/
RegCommonFun.prototype.msg=function(msg){
if(!msg){
return;
}
if($(".reg_layer_msg").length>0){
$(".reg_layer_msg").remove();
clearTimeout(this.timer);
}
var html='<div class="reg_layer_msg" style="display:none;position:fixed;top:43%;width:auto !important;height:auto !important;margin: 0;padding: 0;border-radius:8px;">' +
' <div class="layer_msg_container" style="width:auto !important;height:auto !important;background:rgba(0,0,0,.5);padding:15px 20px;color:white;border-radius:8px;font-size:14px;">'+msg+'</div>' +
' </div>';
$("body").append(html);
var htmlLeft=$(".reg_layer_msg").width();//获取msg弹窗宽度
var screenWidth=$(window).width();//获取浏览器可见区域宽度
//获取弹窗宽度及浏览器可见区域宽度计算弹窗居中位置
$(".reg_layer_msg").fadeIn("fast").css({position:"absolute",left:(screenWidth/2)-(htmlLeft/2)});
this.removeDom(".reg_layer_msg");
};
//这里使用jsonp提交数据到PHP服务器
RegCommonFun.prototype.ajax=function(url,data,method){//ajax
var _this=this,
date=new Date();
if(_this.ajaxment){return false;}
_this.ajaxment=true;
jQuery.ajax({url:url+"?t="+date.getTime(),type:'POST',dataType: 'jsonp',data:data,
timeout: 5000,
jsonp:'callback',
error: function(){
_this.ajaxment=false;
return false;
},
success: function(data){
_this.ajaxment=false;
return method(data);
}
});
};
RegCommonFun.prototype.Rerver=function(title,el,callback){
var _this=this;
var _thisEl=$(el),
name=_thisEl.find("input[name='name']"),
mobile=_thisEl.find("input[name='mobile']"),
address=_thisEl.find("input[name='address']"),
extendParam=_thisEl.find("input[name='extendparam']"),//额外参数
remark=_thisEl.find("input[name='remark']"),
category=title ? title : jQuery("title").html(),
//手机验证
myReg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
var params={
"name":name.val(),
"mobile":mobile.val(),
"address":address.val(),
"extendparam": !extendParam.val() ? '' : extendParam.val(),//额外参数
"category":category,
"remark":remark.val()
};
if(name.length>0){
if(params.name==""||params.name=="姓名"){
_this.tips("请输入姓名",name);
return;
}
}
if(params.mobile=="请输入您的手机号"||params.mobile==""||!myReg.test(params.mobile)){
_this.tips("请输入正确的手机号码",mobile);
return;
}
if(address.length>0){
if(params.address=="请输入所在城市" || params.address==""){
_this.tips("请输入所在城市",address);
return;
}
}
//提交请求
_this.ajax(_this.appointment,params,function(e){
_thisEl.find("input[name='name']").val(""); //防止重复提交，点击之后清空姓名栏
//有自定义回调函数时执行自定义函数
if(callback && typeof callback=="function"){
return callback(e);
}
if(e.status==200){
_this.msg('报名成功！');
}else{
var msg=e.msg=="" ? "服务器繁忙，请稍后再试！" :e.msg;
_this.msg(msg);
}
});
};
var QuickReg=new RegCommonFun();我们来看看运行效果：
参数错误时：
报名成功之后（会自动清空姓名项）：
