基础的表单验证和倒计时获取验证码

<assign name="module_css" value="kfside.css,freeclass.css?20170306"/>
<include file="head" />
<div class="wrap" style="width: 100%;position: relative;height: 1852px;min-width: 1190px;overflow: hidden;">
<div class="banner" style="width: 1920px;height: 1852px;position: absolute;left: 50%;margin-left: -960px;">

<table id="__01" width="1920" height="1852" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<img src="http://img.jiangcdn.com/home/freeclass/free_01.jpg" width="1920" height="440" alt="">
</td>
</tr>
<tr>
<td class="position_tr">
<img src="http://img.jiangcdn.com/home/freeclass/free_02.jpg" height="400" alt="">
<div class="comein">
<div class="sign_up" data='{$uid}' type='{$type}'></div>
<div class="class_info">
<p class="line">课程名称：直通车打造店铺热销爆款</p>
<p class="line">时间：2017年3月13日（20:00~21:30）</p>
<p class="line">费用：免费</p>
<p class="line">地点：小鱼会员专属QQ群</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
<img src="http://img.jiangcdn.com/home/freeclass/free_03.jpg" width="1920" height="400" alt="">
</td>
</tr>
<tr>
<td class="position_tr">
<img src="http://img.jiangcdn.com/home/freeclass/free_04.jpg" width="1920" height="612" alt="">
<div class="rules_info">
<p class="rules">1. 红包可在账户中心—我的钱包查看；</p>
<p class="rules">2. 所有红包有效期30天，过期失效，需尽快使用；</p>
<p class="rules">3. 开三云匠网发放的所有红包均不得用于提现；</p>
<p class="rules">4. 红包需在托管工资时勾选后才能正常使用，否则默认以托管工资支付；</p>
<p class="rules">5. 雇主使用红包拍下的订单，项目正常开始后发生的三天无理由、投诉解雇等非正常完结情况，</p>
<p class="rules">红包均不会退回到雇主的账户；</p>
<p class="rules">6. 红包仅限雇佣开启优惠折扣（红包优惠）的在线全职包月设计师（可在设计师列表页筛选），</p>
<p class="rules">使用该红包时设计师无法降低订单价格</p>
<p class="rules">7. 项目非正常解雇，发生退款行为时，退款金额=该项目已托管的工资-红包金额-需要支付给设</p>
<p class="rules">计师的报酬；</p>
<p class="rules">8. 红包使用的解释权最终归开三云匠网所有；</p>
<p class="rules">9. 在红包使用过程中如有问题，请联系小匠；</p>
</div>
</td>
</tr>
</tbody>
</table>

</div>
</div>
<include file="Public/_footer"/>
<!--注册框-->
<div class="cover regblock">
<div class="reg">
<div class="close_title">
<div class="regClose"></div>
</div>
<div class="reg_title">
<div class="regbar"></div>
<div class="have_account">
<span class="logincheck_span" style="float: right;">已有账户，<a class="login_now"  href="{$URL}/member/blogin/?u={$urlu}">马上登录</a></span>
</div>
</div>

<div class="reg_block" style="margin-top: 11px;">
<div class="passwd_icon"></div>
<div class="text_text reawidth">
<input type="text" placeholder="手机号" οnkeyup="this.value=this.value.replace(/\D/g,'')" name="lxtel" id="lxtel" class="lxtel onfocus_inp">
<!--错误提示框-->
<div class="error_tip">
<div class="tip_text"></div>
<div class="tip_bar"></div>
</div>
</div>
<span class="geCode">获取验证码</span>
<span class="codeTime"><em class="timenum">180</em>秒重发</span>
</div>

<div class="reg_block">
<div class="vcode_icon"></div>
<div class="text_text">
<input type="text" placeholder="验证码" οnkeyup="this.value=this.value.replace(/\D/g,'')" name="vcode" id="vcode" class="vcode onfocus_inp">
<!--错误提示框-->
<div class="error_tip">
<div class="tip_text"></div>
<div class="tip_bar"></div>
</div>
</div>
</div>

<div class="reg_block">
<div class="tel_icon"></div>
<div class="text_text text_pwd">
<input type="password" placeholder="密码（6-16位字母、数字、无空格）" name="passwd" id="passwd" class="passwd onfocus_inp">
<!--错误提示框-->
<div class="error_tip">
<div class="tip_text"></div>
<div class="tip_bar"></div>
</div>
</div>
</div>
           <input type="hidden" name="_reg_code" id="_reg_code" value="{$tes}" />
<input type="hidden" name="_reg_time" id="_reg_time" value="{$tttime}" />
<input type="hidden" name="role" id="role" value="3" />
<div class="regestBtn">注册</div>
<div class="checkBlock">
<p class="register_p2">
<label><input type="checkbox" name="reg_check" id="reg_check" checked="">我已阅读</label>
<a href="/behavior/agreement" target="_blank">《云匠网用户协议》</a>
</p>
</div>
<div class="free_adv"><img src="http://img.jiangcdn.com/guide/freeclass/freeclass_adv.jpg" width="100%" /></div>
</div>
</div>
<!--报名成功框-->
<div class="cover suc_block" >
<div class="success">
<div class="close_title">
<div class="sucClose"></div>
</div>
<div class="success_title">报名成功！</div>
<div class="group_title">申请入群，即可参加公开课</div>
<div class="content_block">
<div class="qq_icon"></div>
<div class="group_name">群号:</div>
<div class="group_number"> 372663903</div>
<div class="group_id">（云匠网线上公开课1群）</div>
</div>
<div class="beizhu_title">—加群请备注:公开课—</div>
<empty name="uid">
<div class='hb_block'>*<em class="spcial_num">700</em>元红包已放置后台账户，在账户中心—我的钱包查看。</div>
<div class="hb_tip">红包可在2017年3月9日后使用。</div>
<else/>
<eq name="type" value="1">
<div class='hb_block'>*<em class="spcial_num">700</em>元红包已放置后台账户，在账户中心—我的钱包查看。</div>
<div class="hb_tip">红包可在2017年3月9日后使用。</div>
</eq>
</empty>
</div>
</div>
<script>
$(function(){

/**注册弹框 显示 隐藏**/
$('.sign_up').click(function(){
var flag = $(this).attr('data');  //判断 有没有登陆
if(parseInt(flag) == 0){
//没登陆  进行登陆注册操作
$('.regblock').show();
}else{
$('.suc_block').show();
}
});

$('.regClose').click(function(){
$('.regblock').hide();
clear(this);
});

/**报名成功弹框 隐藏**/
$('.sucClose').click(function(){
var data = $('.sign_up').attr('type');
if(parseInt(data) ==  1){
// 已经报名成功
$('.suc_block').hide();
}else{
// 第一次报名成功 关闭 
window.location.reload();
}

});

/**报名弹框 隐藏**/
$('.inviteClose').click(function(){
var  flag =  $('.sign_up').attr('data');
if(flag != 0){
$('.invite_block').hide();
}else{
window.location.reload();
}
clear(this);
});

   //请求方法
   var AjaxPost = function(url, query,fun,para){
       $.ajax({
           type:"post",
           url:url,
           data:query,
           dataType:'json',
           async:true,
           success:function(data){
               fun(data,para);
           }
       });
   };

// 验证方法
var  wxRegEx  = function(content,type){
var reg='';
if(type == 'phone'){
reg =/^1[34578]\d{9}$/;
}else if(type == 'password'){
reg = /^[0-9a-zA-Z]{6,16}$/;
}

return reg.test(content) ? true :false;
};

   //错误提示方法
   function errorNotice(tag,msg){
       $(tag).next().find('.tip_text').html(msg);
       $(tag).next().show();
       window.setTimeout(function(){
        $(tag).next().hide();
        $(tag).next().find('.tip_text').html('');
       },3000);
   }
   
   var seconds=180;
var clock=null;
   //获取验证码
   $('.geCode').click(function() {
    var lxtel =$('.lxtel').val();
var role = $('#role').val();
var c = $('#_reg_code').val(); 
var regt = $('#_reg_time').val(); 
var urls = "/member/cellcode/?fromguide=1&_yttaedads=rt&_reg_code_e="+c+"&_reg_time_e="+regt;
    if(lxtel == '') {
    errorNotice('.lxtel','请输入手机号码！');
    }else{
    var checkLxtel = wxRegEx(lxtel,'phone');
    if(checkLxtel) {
    var query = "lxtel=" + lxtel+"&role="+role;
               AjaxPost(urls, query, function (data) {
if(data.status == 0){
errorNotice('.lxtel',data.info);
}else{
    $('.geCode').hide();
    $('.codeTime').show();
    clock=window.setInterval(doLoop,1000);
}
               });
    }else{
    errorNotice('.lxtel','请输入正确的手机号码！');
    }
    }
   });
   
function doLoop(){
seconds--;
if(seconds>0){
$('.codeTime em').text(seconds);
}else{
clearInterval(clock);
    $('.geCode').show();
    $('.codeTime').hide();
}
}

//注册
$('.regestBtn').click(function() {
var flag = true;
var lxtel = $('#lxtel').val();
var yzm  = $('#vcode').val();
var password = $('#passwd').val();

//手机号码
if(lxtel == '') {
errorNotice('.lxtel','请输入手机号码');
flag = false;
return false;
}else{
var checkTel = wxRegEx(lxtel,'phone');
if(!checkTel){
errorNotice('.lxtel','请输入正确的手机号码');
flag =false;
return false;
}
}

//验证码
if (yzm == '') {
errorNotice('.vcode','请输入验证码');
flag = false;
return false;
}

//密码
if(password == '') {
errorNotice('.passwd','请输入密码');
flag = false;
return false;
}else{
var checkpwd = wxRegEx(password,'password');
if(!checkpwd){
errorNotice('.passwd','密码(6-16位字母、数字、无空格)');
flag =false;
return false;
}
}

//阅读协议 
var checked=$('#reg_check')[0].checked;
if(!checked){
flag = false;
window.alert('请先阅读云匠网协议');
return false;
}

//注册
if(flag){
var query = "lxtel="+lxtel+"&username="+lxtel+"&vcode="+yzm+"&passwd="+password;
var bk ='{$bk}';
       AjaxPost('/member/reg?bk='+bk, query, function (data) {
           if (data.status) {
            AjaxPost('/guide/freeclasslq2  ', '', function (data) {
            if(data.status){
              $('.regblock').hide();
                $('.suc_block').show();
            }else{
                window.alert(data.info);
            }
            });
           }else {
               window.alert(data.info);
           }
       });
}
});
   
   //清空表单数据
   function clear(that){
    var arry = $(that).parents('div.cover').find('input');
    for(var i = 0; i< arry.length;i++){
    $(arry[i]).val('');
    }
   }
   
   // input border
   $('.onfocus_inp').focus(function(){
    $(this).parents('div.reg_block ').addClass('cur_focus');
   }).blur(function(){
    $(this).parents('div.reg_block ').removeClass('cur_focus');
   });
});
</script>
</body>
</html>