帮助中心

Email Register Verify 常见问题! 打印

  • Email, Register, Verify
  • 1

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

 

此模块不设置任何后缀默认使用原始表单验证。


此文章对您是否有帮助?

« 返回