ad-password-self-service/templates/reset_password.html

{% extends 'base.html' %}
{% load static %}
{% block paneltitle %}重置密码{% endblock %}
{% block middleblock %}
<div class="layui-row">
    <form class="layui-form  layui-form-pane" name="resetPassword" method="post" action="" autocomplete="off">{% csrf_token %}
        <div class="layui-form-item">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-block">
                <input type="text" name="username" lay-verify="required" lay-verType="tips" autocomplete="off" readonly value="{{ username }}" class="layui-input">
                <input type="hidden" id="code" name="code" readonly value="{{ code }}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-block">
                <input type="password" lay-verify="pass" lay-verType="tips" name="new_password" id="new_password" placeholder="请输入新密码"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input type="password" lay-verify="pass|repass" lay-verType="tips" name="ensure_password" id="ensure_password" placeholder="再次确认新密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <button type="submit" lay-submit="" class="layui-btn layui-btn-normal layui-btn-fluid">立即提交</button>
        </div>
        <div class="layui-form-item a-middle-text">
            <span class="layui-breadcrumb">
            <a class="layui-text" href="/"><i class="layui-icon layui-icon-prev"></i> 修改密码</a>
            <a class="layui-text" id="redirect_url" href="/unlockAccount?code={{ code }}&username={{ username }}"><i class="layui-icon layui-icon-password"></i> 解锁账号</a>
            </span>
        </div>
    </form>
</div>
{% endblock %}
{% block middleblockfoot %}
<blockquote class="layui-elem-quote layui-quote-nm">
    新密码8至30位长度，要求包含大小写字母及数字。
    <p>会话有效期5分钟，重置密码会自动解锁账号(己禁用的账号不会生效)</p>
</blockquote>
{% endblock %}
{% block footerjs %}
<script src="{% static 'layui/layui.js' %}"></script>
<script>
layui.use(['form', 'jquery',], function () {
    let form = layui.form,
        $ = layui.jquery;
    form.verify({
        pass: [
            /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}$/,
            '密码必须8到30位，要求包含大小写字母、数字与字符，且不能出现空格！'
        ],
        repass: function (value,item) {
            if ($('#ensure_password').val() !== $('#new_password').val()) {
                return '两次输入密码不一致！';
            }
        }
        });
});
</script>
{% endblock %}