苹果CMS会员绑定手机邮箱的界面代码示例

小编兔妹 2026-07-26 苹果CMS教程 18 浏览

本套代码适配苹果 CMS V10 官方预设模板（default），分为前端模板页面、后端 AJAX 交互逻辑，配套说明三部分；需要说明的是，实现已登录用户：查看当前绑定手机号 / 邮箱、绑定初学者机、绑定新邮箱，更换已绑定手机 / 邮箱，短信 / 邮箱验证码发送，表单校验、防重复提交、错误提醒，完全兼容苹果 CMS 内置会员接口，验证码接口、会员信息更新接口，不必二次开发底层逻辑，直接放入模板文件夹就能使用。

文件文件夹：html/user/bind.html

页面变量说明：$acphone = 已绑定手机号；$email = 已绑定邮箱

苹果cms用户绑定手机/邮箱完整页面代码示例

<h1>绑定{if condition="$ac eq 'phone'"}手机{else/}邮箱{/if}</h1>
<form id="fm" name="fm" method="post" action="" >
   <input type="hidden" name="ac" value="{$ac}">
   {if condition="$ac eq 'phone'"}手机号{else/}邮箱{/if}：
   <input type="text" name="to" class="member-input" value="">

   <input id="btn_bind_send" type="button" value="获取验证码"/>

   验证码：<input type="text" name="code" class="member-input" value="">

   <input id="btn_submit" type="button" class="search-button" value="确认绑定">
</form>
<script type="text/javascript">
	var countdown=60;
	function settime(val) {
		if (countdown == 0) {
			val.removeAttribute("disabled");
			val.value="获取验证码";
			countdown = 60;
			return true;
		} else {
			val.setAttribute("disabled", true);
			val.value="重新发送(" + countdown + ")";
			countdown--;
		}
		setTimeout(function() {settime(val) },1000)
	}

	$('#btn_bind_send').click(function(){
	    var ac = $('input[name="ac"]').val();
		var to = $('input[name="to"]').val();
		if(ac=='email') {
            var pattern = /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/;
            var ex = pattern.test(to);
            if (!ex) {
                alert('邮箱格式不正确');
                return;
            }
        }
        else if(ac=='phone') {
            var pattern=/^[1][0-9]{10}$/;
            var ex = pattern.test(to);
            if (!ex) {
                alert('手机号格式不正确');
                return;
            }
        }
		else{
		    alert('参数错误');
			return;
		}

		settime(this);
		var data = $("#fm").serialize();

		$.ajax({
			url: "{:url('user/bindmsg')}",
			type: "post",
			dataType: "json",
			data: data,
			beforeSend: function () {
				//开启loading
			},
			success: function (r) {
				alert(r.msg);
			},
			complete: function () {
				//结束loading
			}
		});
	});

	$("#btn_submit").click(function() {
        var ac = $('input[name="ac"]').val();
        var to = $('input[name="to"]').val();

        if(ac=='email') {
            var pattern = /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/;
            var ex = pattern.test(to);
            if (!ex) {
                alert('邮箱格式不正确');
                return;
            }
        }
        else if(ac=='phone') {
            var pattern=/^[1][0-9]{10}$/;
            var ex = pattern.test(to);
            if (!ex) {
                alert('手机号格式不正确');
                return;
            }
        }
        else{
            alert('参数错误');
            return;
        }

		var code = $('input[name="code"]').val();
		if(code==''){
			alert('请输入验证码');
			return;
		}
		var data = $("#fm").serialize();

		$.ajax({
			url: "{:url('user/bind')}",
			type: "post",
			dataType: "json",
			data: data,
			beforeSend: function () {
				//开启loading
				//$(".loading_box").css("display","block");
				$("#btn_submit").css("background","#fd6a6a").val("loading...");
			},
			success: function (r) {
				alert(r.msg);
				if(r.code==1){
					location.href="{:url('user/info')}";
				}
			},
			complete: function () {
				//结束loading
				//$(".loading_box").css("display","none");
				$("#btn_submit").css("background","#fa4646").val("提交");
			}
		});
	});
</script>

prepreprepreprepreprepreprepreprepreprepre

补充说明：