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

系统管理员 2022-06-17 03:12 85阅读 0赞

<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>