<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=360, user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/form.css">
    <script src="{{ theme }}/js/jquery.min.js"></script>
    <script src="{{ theme }}/js/jquery.validate.js"></script>
    <script src="{{ theme }}/js/bootstrap.min.js"></script>
    <script src="{{ theme }}/js/public.js"></script>
    <script>
        $(document).ready(function () {
            var notice = $('#notice');
            var myModal = $('#myModal');
            $('#registerForm').validate({
                onkeyup: false,
                onfocusout: false,
                rules: {
                    phone: {
                        required: true,
                        minlength: 11,
                        maxlength: 11,
                        digits: true
                    },
                    code: 'required',
                    password: 'required'
                },
                messages: {
                    phone: '请输入11位手机号码',
                    code: '请输入验证码',
                    password: '请输入密码'
                },
                errorLabelContainer: "#notice",
                errorElement: 'span',
                invalidHandler: function () {
                    myModal.modal('show');
                },
                submitHandler: function (form) {
                    form.submit();
                }
            });
            notice.bind('DOMNodeInserted', function () {
                $(this).children(':not(:first)').remove();
            });
            myModal.on('hide.bs.modal', function () {
                notice.children().remove();
            });
            sendCodeBindClick("{{ url }}", 0);
            {% if(error) %}
                notice.html('<span>{{ error }}</span>');
                myModal.modal('show');
            {% endif %}
        });
    </script>
</head>
<body>

<div class="container-fluid text-center">
    <form id="registerForm" method="post">
        <h2>注册</h2>

        <p class="has-feedback username">
            <label for="phone" class="sr-only">用户名</label>
            <input type="tel" name="phone" id="phone" class="form-control input-lg" placeholder="手机号码">
            <span class="form-control-feedback"></span>
        </p>

        <p class="has-feedback password">
            <label for="password" class="sr-only">密码</label>
            <input type="password" name="password" id="password" class="form-control input-lg" placeholder="密码">
            <span class="form-control-feedback"></span>
        </p>

        <p class="has-feedback code">
            <label for="code" class="sr-only">验证码</label>
            <input type="text" name="code" id="code" class="form-control input-lg" placeholder="验证码">
            <span id="send" class="form-control-feedback">发送验证码</span>
        </p>
        <input type="submit" id="register_submit" value="注册" class="btn btn-lg btn-block">
    </form>
</div>

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content text-center">
            <h4>提示</h4>

            <p id="notice"></p>
            <button type="button" class="btn btn-lg btn-block" data-dismiss="modal">确认</button>
        </div>
    </div>
</div>

</body>
</html>