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

本套代码适配苹果 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>

补充说明：

• 页面路由：用户模块绑定页，区分手机/邮箱两种绑定类型，由$ac变量控制

• 接口地址：发送验证码 user/bindmsg，确认绑定 user/bind，绑定成功跳转用户资料页 user/info

• 前端校验：内置国内11位手机号正则、标准邮箱正则，为空与格式错误弹窗提示

• 验证码按钮：60秒倒计时防重复发送，倒计时内按钮禁用

• 提交交互：提交按钮加载状态变色，绑定成功自动返回个人中心