<div id="page-content" class="clearfix">
    <div class="page-header position-relative">
        <h1>个人信息</h1>
    </div>
    
    <!--/page-header-->
    <!-- PAGE CONTENT BEGINS HERE -->
    <form id="validation-form" class="form-horizontal" action="${ctx}/settings/profile/save">

        <div class="control-group">
            <label class="control-label" >账户：</label>

            <div class="controls">
                <span>${user.username}</span>
            </div>
        </div>
			<input  autocomplete="off"   type="hidden" name="isModifyPwd" value="false"/>
			<input  autocomplete="off"   type="hidden" name="username" value="${user.username}"/>
			
                <div class="control-group pswDisable">
                    <div class="controls" style="display:inline-block">
                        <label>
                            <input  autocomplete="off"   type="checkbox" ><span class="lbl"> 修改密码</span>
                        </label>
                    </div>
                </div>
                
 				<div class="control-group">
                    <label class="control-label" for="form-field-2">原始密码：</label>

                    <div class="controls">
                        <input  autocomplete="off"   name="password" type="password" id="form-field-2" placeholder="" disabled="true">
                        <span class="help-inline" for="form-field-2">6到16个字符，必须是数字英文结合</span>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="form-field-3">密码：</label>

                    <div class="controls">
                        <input  autocomplete="off"   name="newPassword" type="password" id="form-field-3" placeholder="" disabled="true">
                        <span class="help-inline" for="form-field-3">6到16个字符，必须是数字英文结合</span>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="form-field-4">确认密码：</label>

                    <div class="controls">
                        <input  autocomplete="off"   name="confirmPassword" type="password" id="form-field-4" placeholder="" disabled="true">
                        <span class="help-inline" for="form-field-4">6到16个字符，必须是数字英文结合</span>
                    </div>
                </div>


                <div class="control-group pswToggle">
                    <div class="controls" style="display:inline-block">
                        <label>
                            <input  autocomplete="off"   type="checkbox" disabled="true" ><span class="lbl"> 显示密码</span>
                        </label>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="form-field-5"><sup>*</sup>姓名：</label>

            <div class="controls">
                <input  autocomplete="off"   type="text" id="form-field-5" placeholder="" name="contactName" value="${user.contactName!}">
                <span class="help-inline" for="form-field-5">2~64个字符</span>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label" for="form-field-6"><sup>*</sup>联系电话：</label>

            <div class="controls">
                <input  autocomplete="off"   type="text" id="form-field-6" placeholder="" name="phone" value="${user.phone!}">
                <span class="help-inline" for="form-field-6">11位手机号码</span>
            </div>
        </div>
         <div class="control-group pswToggle">
                   <div class="controls">
                        <label>
                            <span class="i-cue hidden" name="message" ></span>
                        </label>
                    </div>
           </div>
        <div class="form-actions">
            <button class="btn btn-info" type="submit"><i class="icon-ok"></i> 确定</button>
            &nbsp; &nbsp; &nbsp;
            <a class="btn" href="${ctx}/back/main/dashboard" type="reset"><i class="icon-undo"></i> 取消</a>
        </div>
    </form>

    <div class="space-24ger"></div>
</div>
<script type="text/javascript" src="${ctx}/assets/back/js/jquery.validate.min.js"></script>
<script type="text/javascript">
$(".pswDisable input[type=checkbox]").on('click',function(){
    var inp = $(this).parents('form').find("input[name=password],input[name=newPassword],input[name=confirmPassword]");
    if(inp.attr('disabled')){
        inp.removeAttr('disabled');
        $("input[name='isModifyPwd']").val("true");
        $(".pswToggle input[type=checkbox]").removeAttr('disabled');
    }else{
        inp.attr('disabled','disabled');
         $(".pswToggle input[type=checkbox]").attr('disabled','disabled');
        $("input[name='isModifyPwd']").val("false");
        inp.val("");
        
    }
});

$(".pswToggle input[type=checkbox]").on('click',function(){
    var inp = $(this).parents('form').find("input[name=newPassword],input[name=confirmPassword]")
    if(inp.attr("type")=='password'){
        inp.attr('type','text');
    }else{
        inp.attr('type','password');
    };
});

 jQuery.validator.addMethod("pswcheck", function (value, element) {
               return this.optional(element) || /^(?![0-9]+$)(?![a-zA-Z]+$)[A-Za-z0-9]+$/.test(value);
        }, "请输入字母和数字组合！");
        
jQuery.validator.addMethod("phone", function (value, element) {
    return this.optional(element) || /0\d{2}-\d{8}|0\d{2}-\d{7}|0\d{3}-\d{7}|0\d{3}-\d{8}|(1[3-8]{1}[0-9]{9})/.test(value);
}, "请输入正确的电话号码！");

$('#validation-form').validate({
    errorElement: 'span',
    errorClass: 'help-inline',
    focusInvalid: false,
    ignore:".ignore",
    onfocusout: function(element) {
                    $(element).valid();
                },
    rules: {
        password: {
            minlength: 6,
            maxlength:16,
            pswcheck:'required'
        },
        newPassword: {
            minlength: 6,
            maxlength:16,
             pswcheck:'required'
        },
        confirmPassword: {
            minlength: 6,
            maxlength:16,
            equalTo: "#form-field-3",
            pswcheck:'required'
        },
        contactName: {
            required: true,
            minlength:2,
            maxlength:64
        },
        phone: {
            required: true,
            phone: 'required'
        }
    },
    messages: {
     	password: {
            minlength: "输入正确的密码长度！",
            maxlength:"密码长度过长！"
        },
        newPassword: {
            minlength: "输入正确的密码长度！",
            maxlength:"密码长度过长！"
        },
        confirmPassword: {
            minlength: "输入正确的密码长度！",
            maxlength:"密码长度过长！",
            equalTo:"请输入相同的密码！"
        },
        contactName:{
            required:"请输入姓名！",
            minlength:"请输入正确的姓名长度！",
            maxlength:"请输入正确的姓名长度！"
        },
        phone:{
            required:"请输入电话号码！",
        }
    },
    invalidHandler: function (event, validator) { //display error alert on form submit
        $('.alert-error', $('.login-form')).show();
    },
    highlight: function (e) {
        $(e).closest('.control-group').removeClass('info').addClass('error');
    },
    success: function (e) {
        $(e).closest('.control-group').removeClass('error').addClass('info');
        $(e).remove();
    },
    errorPlacement: function (error, element) {
        if(element.is(':checkbox') || element.is(':radio')) {
            var controls = element.closest('.controls');
            if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
            else error.insertAfter(element.nextAll('.lbl').eq(0));
        }
        else if(element.is('.chzn-select')) {
            error.insertAfter(element.nextAll('[class*="chzn-container"]').eq(0));
        }
        else error.insertAfter(element);
    },
    submitHandler: function (form) {
    	$("button:submit").attr('disabled', 'disabled');
    	var _url = $('form').attr('action');
		var _param = $('form').serialize();
		$.post(_url,_param,function(data) {
			if ("ok"==data.status) {
				window.location="${ctx}/back/main/dashboard";
			} else {
				$("button:submit").removeAttr('disabled');
				$("span[name='message']").removeClass("hidden").text(data.msg);
			}
		});
    },
    invalidHandler: function (form) {
    }
});

</script>