JS报名组件（依赖JQ）
来源：互联网 发布：武汉发展前景知乎 编辑：程序博客网 时间：2024/05/17 22:30
这是我自己写的一个报名组件，为了编写方便，依赖了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();我们来看看运行效果：
参数错误时：
报名成功之后（会自动清空姓名项）：
阅读全文
