<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>更换手机号</title>
	<meta name="decorator" content="default"/>
	<script src="${ctxStatic}/jquery/md5.js" type="text/javascript"></script>
	<script type="text/javascript">



		$(document).ready(function() {
			$("#password").focus();
            /*$("#password").blur(function(){
                	window.alert($("#loginName").val()+"111");
            });*/

            $("#password").blur(function(){
				var loginName = $("#loginName").val();
				var password = $.md5(($("#password").val()));
                $.ajax({
                    type: "post",
                    url: "${ctx}/sys/register/validatePassword",
                    data: {loginName:loginName,password:password},
                    dataType:"text",
                    success: function(data) {
                        if(data=="false"){
                            $("#span").empty();
                            $("#span").html("密码不正确");
                            $("#password").focus();
                        }else if(data=="true"){
                            $("#span").empty();
                            $("#span").html("已通过验证");
                        }
                    }
                })
            });
            $("#mobile").blur(function(){
                var mobile =  $("#mobile").val();
                $.ajax({
                    type: "post",
                    url: "${ctx}/sys/user/validateMobile",
                    data: {mobile:mobile},
                    dataType:"text",
                    success: function(data) {
                        var date = data+"";
                        if(data=="false"){
                            $("#mobileSpan").empty();
                            $("#mobileSpan").html("号码已注册或不正确");
                            //$("#mobile").focus();
                        }else if(data=="true"&&$("#mobile-error").text()==""){
                            $("#mobileSpan").empty();
                            $("#mobileSpan").html("已通过验证");
                        }else if($("#mobile-error").text()!=""){
                            //$("#mobile").focus();
                            $("#mobileSpan").empty();
						}
                    }
                })
            });
            $("#inputForm").validate({
                rules: {
                    randomCode: {
                        remote:{
                            url:"${ctx}/sys/register/validateMobileCode",
                            data:{
                                mobile:function(){
                                    return $("#mobile").val();
                                }
                            }
                        }
                    }
                },
                messages: {
                    passwoed:{required: "密码不能为空."},
                    //mobile:{remote: "此手机号已经被注册!", required: "手机号不能为空."},
                    randomCode:{remote: "验证码不正确!", required: "验证码不能为空."}
                },
                submitHandler: function(form){
                    loading('正在提交，请稍等...');
                    form.submit();
                },
                errorContainer: "#messageBox",
                errorPlacement: function(error, element) {
                    $("#messageBox").text("输入有误，请先更正。");
                    if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });


            // 手机号码验证
            jQuery.validator.addMethod("isMobile", function(value, element) {
                var length = value.length;
                var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
                return (length == 11 && mobile.test(value));
            }, "请正确填写您的手机号码");

            $('#sendPassBtn').click(function () {
                if($("#mobile").val()=="" || $("#mobileSpan").text()=="号码已注册或不正确"|| $("#mobile-error").text()!=""){
                    top.layer.alert("请输入有效的手机号码！", {icon: 0});//讨厌的白色字体问题
                    return;
                }

                $("#sendPassBtn").attr("disabled", true);
                $.get("${ctx}/sys/register/getRegisterCode?mobile="+$("#mobile").val(),function(data){
                    if(data.success == false){
                        //top.layer.alert(data.msg, {icon: 0});讨厌的白色字体问题
                        alert(data.msg);
                        $("#sendPassBtn").html("重新发送").removeAttr("disabled");
                        clearInterval(countdown);
                    }
                });
                var count = 60;
                var countdown = setInterval(CountDown, 1000);
                function CountDown() {
                    $("#sendPassBtn").attr("disabled", true);
                    $("#sendPassBtn").html("等待 " + count + "秒!");
                    if (count == 0) {
                        $("#sendPassBtn").html("重新发送").removeAttr("disabled");
                        clearInterval(countdown);
                    }
                    count--;
                }
            }) ;
		});
	</script>
	<style>
		.form-top{
			padding-top: 40px;
			margin-left: 15px;
			margin-right: 15px;
		}
		.sendPass{
			width:35%;
			float: right;
			height:40px;
			line-height: 40px;
			padding: 0px;
			background-color: #0f92fb;
			color:#ffffff;
			border:none;
		}
		.sendPass:hover{
			opacity: .9;
		}
		.help-inline{
			color: red;
			font-size: 12px;
		}
	</style>
</head>
<body>
	<form:form id="inputForm" modelAttribute="user" action="${ctx}/sys/user/modifyMobo"  method="post" class="form-horizontal form-group">
		<input id="loginName" name="loginName" type="hidden" value="${user.loginName}" />

	<div class="container1">
		<div class="form-top">
			<div class="layui-item layui-col-sm12 lw12">
				<label class="layui-form-label"><span class="require-item">*</span>输入密码：</label>
				<div class="layui-input-block">
					<input id="password" name="password" type="password" value="" maxlength="50" minlength="3"  class="form-control  layui-input required"/>
					<span id="span" class="help-inline"></span>
				</div>
			</div>
			<div class="layui-item layui-col-sm12 lw12">
				<label class="layui-form-label"><span class="require-item">*</span>输入新手机号：</label>
				<div class="layui-input-block">
					<input id="mobile" name="mobile" type="text" value="" maxlength="11" minlength="11" class="form-control layui-input text-muted required isMobile"/>
					<span id="mobileSpan" class="help-inline"></span>
				</div>
			</div>
			<div class="layui-item layui-col-sm12 lw12">
				<label class="layui-form-label"><span class="require-item">*</span>输入验证码：</label>
				<div class="layui-input-block">
					<div style="width:60%;float: left;">
					<input id="randomCode" name="randomCode" type="text" value="" maxlength="50" minlength="3" class="form-control required layui-input" />

					</div>
					<button id="sendPassBtn" class="sendPass" type="button">
						<i class="ace-icon fa fa-lightbulb-o"></i>
						<span class="bigger-110">获取验证码!</span>
					</button>
				</div>
			</div>
		</div>
	</div>

	</form:form>
</body>
</html>