bootstrap自带表单正则验证，样式美观

最新推荐文章于 2025-02-15 19:59:00 发布

bbsddn

最新推荐文章于 2025-02-15 19:59:00 发布

阅读量979

点赞数

分类专栏： Django 文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/bbsddn/article/details/105830905

版权

Django 专栏收录该内容

13 篇文章

订阅专栏

本文展示了如何利用Bootstrap内置的表单验证功能，结合正则表达式实现数据验证，同时强调了验证过程中的样式美化，以提升用户体验。示例效果获得好评，期待读者点赞。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果，觉得好的朋友点个赞！
在这里插入图片描述

<form class="was-validated" action="" method="post">
    {% if message %}
        <div class="alert alert-warning">{{ message }}</div>
    {% endif %}
    {% csrf_token %}
    <div class="form-group">
        <label for="id_uname">用户名</label>
        <input type="text" class="form-control" id="id_uname" name="uname" required
               pattern="^[a-z0-9A-Z]+([-_.][a-z0-9A-Z]+)*@([a-z0-9A-Z]+[-.])+[a-z0-9A-Z]{2,6}$"
               title="帐号应为xxx@xx.xx邮箱地址" placeholder="输入邮箱地址">
        <small id="nameHelp" class="form-text text-muted"></small>
    </div>
    <div class="form-group">
        <label for="id_pwd">密码</label>
        <input type="password" class="form-control" id="id_pwd" name="pwd" required
        pattern=[a-z0-9A-Z]{6,12} title="密码需要6-12位"   placeholder="输入密码">
        <small id="pwdHelp" class="form-text text-muted"></small>
    </div>
    {#                    <div class="form-group form-check">#}
    {#                        <input type="checkbox" class="form-check-input" id="exampleCheck1">#}
    {#                        <label class="form-check-label" for="exampleCheck1">Check me out</label>#}
    {#                    </div>#}
    <button type="submit" class="btn btn-primary">登录</button>
</form>```