118 lines
5.4 KiB
HTML
118 lines
5.4 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}用户注册 - 太白购物商城{% endblock %}
|
||
|
||
{% block head %}
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/register.css') }}">
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="row justify-content-center">
|
||
<div class="col-md-6 col-lg-5">
|
||
<div class="card shadow">
|
||
<div class="card-header text-center">
|
||
<h4><i class="bi bi-person-plus"></i> 用户注册</h4>
|
||
</div>
|
||
<div class="card-body">
|
||
<form method="POST" id="registerForm">
|
||
{{ form.hidden_tag() }}
|
||
|
||
<div class="mb-3">
|
||
{{ form.username.label(class="form-label") }}
|
||
{{ form.username(class="form-control" + (" is-invalid" if form.username.errors else "")) }}
|
||
{% if form.username.errors %}
|
||
<div class="invalid-feedback">
|
||
{% for error in form.username.errors %}
|
||
{{ error }}
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
<div class="form-text">用户名只能包含字母、数字和下划线，3-20个字符</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
{{ form.email.label(class="form-label") }}
|
||
<div class="input-group">
|
||
{{ form.email(class="form-control" + (" is-invalid" if form.email.errors else ""), id="emailInput") }}
|
||
<button type="button" class="btn btn-outline-primary" id="sendEmailCodeBtn">
|
||
<span id="btnText">发送验证码</span>
|
||
</button>
|
||
</div>
|
||
{% if form.email.errors %}
|
||
<div class="invalid-feedback d-block">
|
||
{% for error in form.email.errors %}
|
||
{{ error }}
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
{{ form.email_code.label(class="form-label") }}
|
||
{{ form.email_code(class="form-control" + (" is-invalid" if form.email_code.errors else ""), placeholder="请输入6位数字验证码") }}
|
||
{% if form.email_code.errors %}
|
||
<div class="invalid-feedback">
|
||
{% for error in form.email_code.errors %}
|
||
{{ error }}
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
{{ form.phone.label(class="form-label") }}
|
||
{{ form.phone(class="form-control" + (" is-invalid" if form.phone.errors else "")) }}
|
||
{% if form.phone.errors %}
|
||
<div class="invalid-feedback">
|
||
{% for error in form.phone.errors %}
|
||
{{ error }}
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
{{ form.password.label(class="form-label") }}
|
||
{{ form.password(class="form-control" + (" is-invalid" if form.password.errors else ""), id="passwordInput") }}
|
||
{% if form.password.errors %}
|
||
<div class="invalid-feedback">
|
||
{% for error in form.password.errors %}
|
||
{{ error }}
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
<div class="form-text">密码必须包含至少一个字母和一个数字，6-20个字符</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
{{ form.confirm_password.label(class="form-label") }}
|
||
{{ form.confirm_password(class="form-control" + (" is-invalid" if form.confirm_password.errors else ""), id="confirmPasswordInput") }}
|
||
{% if form.confirm_password.errors %}
|
||
<div class="invalid-feedback">
|
||
{% for error in form.confirm_password.errors %}
|
||
{{ error }}
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
<div id="passwordMatchMessage" class="form-text"></div>
|
||
</div>
|
||
|
||
<div class="d-grid">
|
||
{{ form.submit(class="btn btn-success") }}
|
||
</div>
|
||
</form>
|
||
|
||
<hr>
|
||
<div class="text-center">
|
||
<p class="mb-0">已有账户？ <a href="{{ url_for('auth.login') }}">立即登录</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script src="{{ url_for('static', filename='js/register.js') }}"></script>
|
||
{% endblock %}
|