Email Register Verify 模块使用,需要先激活模块,然后增加一个新的 邮件模板:
邮件模板名称:Send Email Verify
邮件模板标题:注册邮箱验证码
邮件模板内容:
你的验证码是 {$code} 此邮件仅供验证邮箱真实性,请勿回复。
模板名称不可变更,标题和内容都可以自行变更。
需要手动修改注册页面(以 WHMCS 7.3.0 为例) WHMCS/temaplates/模板名称/clientregister.tpl 需要找到
{include file="$template/includes/linkedaccounts.tpl" linkContext="registration"}
在下面添加
<!-- Email Register Verify Start --> <div class="sub-heading"> <span>邮件验证</span> </div> <div class="row"> {if $suffixs} <div class="col-sm-6"> <div class="form-group email-group row prepend-icon" style="width: -webkit-fill-available;"> <div class="col-sm-8"> <label for="inputEmail" class="field-icon"> <i class="fa fa-envelope"></i> </label> <input type="text" id="mailto" class="form-control col-sm-12" placeholder="{$LANG.orderForm.emailAddress}" value="" style="padding-left: 36px;" /> <input type="hidden" name="email" id="inputEmail" value="{$clientemail}"> </div> <div class="email-group col-sm-4"> <select class="form-control" id="suffix"> {foreach $suffixs as $mail} <option value="@{$mail.suffix}" selected>@{$mail.suffix}</option> {/foreach} </select> </div> </div> <button class="btn btn-sm btn-primary btnCheck" onClick="verifyCode()">验证邮箱</button> </div> {else} <div class="col-sm-6"> <div class="form-group prepend-icon"> <label for="inputEmail" class="field-icon"> <i class="fa fa-envelope"></i> </label> <input type="email" name="email" id="inputEmail" class="field form-control" placeholder="{$LANG.orderForm.emailAddress}" value="{$clientemail}"> </div> </div> {/if} <div class="col-sm-6"> <div class="form-group input-group code"> <input type="text" name="code" id="code" class="form-control" placeholder="输入验证码" style="border-top-right-radius: 0;border-bottom-right-radius: 0;"> <span class="input-group-btn" id="SendCode"> <a class="btn btn-success" id="btnSendCode" onClick="sendMessage()" style="height: 36px;">获取验证码</a> </span> </div> <span class="help-block"> <div class="alert message" style="display: none;margin-bottom: 0;padding: 5px;"></div> </span> </div> </div> <!-- Email Register Verify End -->
找到
<div id="containerNewUserSignup">
修改为
<div id="containerNewUserSignup" style="display: none">
找到
<div id="containerNewUserSecurity"{if $remote_auth_prelinked && !$securityquestions } class="hidden"{/if}>
修改为
<div id="containerNewUserSecurity"{if $remote_auth_prelinked && !$securityquestions } class="hidden"{/if} style="display: none">
然后在文件最下方加入
<!-- Email Register Verify Start --> <style> .has-error .form-control { border-color: #a94442 !important; box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !important; } </style> <script type="text/javascript"> var InterValObj; //timer变量,控制时间 var count = 60; //间隔函数,1秒执行 var curCount; //当前剩余秒数 {if $suffixs} $('#mailto').bind('input propertychange change', function(event) { $('#inputEmail').val($('#mailto').val()+$('#suffix').val()); }); {/if} function verifyCode() { var code = $('#code').val(); if ( code == '' ) { $('.code').addClass('has-error'); $('.message').show().addClass('alert-danger').html('验证码不能为空'); } else { //向后台发送处理数据 $.ajax({ type: 'POST', //用POST方式传输 dataType: 'JSON', //数据格式:JSON url: '{$systemurl}modules/addons/email_registration_verification/GetMailCode.php', data: 'action=checkCode&code='+code, beforeSend:function(XMLHttpRequest){ $('.btnCheck').attr('disabled', 'true'); $('.btnCheck').html('<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>'); }, success: function ( data ){ if (data.status == 'success') { console.log(data); $('.btnCheck').hide(); $('#containerNewUserSignup').show(); $('#containerNewUserSecurity').show(); } else { console.log(data); $('.code').addClass('has-error'); $('.btnCheck').attr('disabled', false); $('.btnCheck').html('验证邮箱'); } $('.message').show().removeClass('alert-danger').addClass('alert-' + data.status).html(data.info); } }); } } function sendMessage() { {if $suffixs} var mail = $('#mailto').val(); var mailto = $('#mailto').val()+$('#suffix').val(); {else} var mail = $('#inputEmail').val(); var mailto = $('#inputEmail').val(); {/if} var token = $("input[name='token']").val(); if ( mail == '' ) { $('.code').addClass('has-error'); $('.message').show().addClass('alert-danger').html('邮箱不能为空'); } else { //向后台发送处理数据 $.ajax({ type: 'POST', //用POST方式传输 dataType: 'JSON', //数据格式:JSON url: '{$systemurl}modules/addons/email_registration_verification/GetMailCode.php', data: 'action=sendCode&mailto='+mailto+'&token='+token, beforeSend:function(XMLHttpRequest){ $('#btnSendCode').attr('disabled', 'true'); $('#btnSendCode').html('<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>'); }, success: function ( data ){ if (data.status == 'success') { console.log(data); //设置button效果,开始计时 curCount = data.count; $('#btnSendCode').attr('disabled', true); $('#btnSendCode').text('请在 ' + curCount + ' 秒内输入'); InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次 } else { $('#btnSendCode').attr('disabled', false); $('#btnSendCode').html('获取验证码'); console.log(data); } $('.message').show().removeClass('alert-danger').addClass('alert-' + data.status).html(data.info); } }); } } //timer处理函数 function SetRemainTime() { if (curCount == 0) { window.clearInterval(InterValObj);//停止计时器 $('#btnSendCode').removeAttr('disabled');//启用按钮 $('#btnSendCode').text('重新发送'); } else { curCount--; $('#btnSendCode').text('请在 ' + curCount + ' 秒内输入'); } } </script> <!-- Email Register Verify End -->
此模块不设置任何后缀默认使用原始表单验证。