通过bootstrap表单验证后ajax提交表单数据

最新推荐文章于 2022-03-04 18:01:17 发布

原创最新推荐文章于 2022-03-04 18:01:17 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #jquery #python

Django 同时被 2 个专栏收录

13 篇文章

订阅专栏

javascript

3 篇文章

订阅专栏

本文介绍了如何结合Bootstrap的表单验证功能与Ajax实现无刷新的数据提交。通过JavaScript脚本进行前端验证，然后利用jQuery的Ajax方法将表单数据发送到Python后端进行处理。

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

表单示例：

<form class="needs-validation tab-pane fade show active" autocomplete="off" novalidate=""
                      id="signin-tab" name="loginform" method="post">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="id_uname">账号</label>
                        <input class="form-control" name="uname" id="id_uname" type="text"
                               placeholder="输入4-12位英文数字账户" pattern="[a-z0-9A-Z]{4,12}"
                               required>
                        <div class="invalid-feedback">请输入一个有效的账号.</div>
                    </div>
                    <div class="form-group">
                        <label for="si-password">密码</label>
                        <div class="password-toggle">
                            <input class="form-control" name="pwd" type="password" id="si-password"
                                   pattern="[a-z0-9A-Z]{6,12}" required="">
                            <label class="password-toggle-btn">
                                <input class="custom-control-input" type="checkbox"><i
                                    class="czi-eye password-toggle-indicator"></i><span
                                    class="sr-only">显示密码</span>
                            </label>
                            <div class="invalid-feedback">请输入6-12位英文数字密码.</div>
                        </div>
                    </div>
                    <div class="form-group d-flex flex-wrap justify-content-between">
                        <div class="custom-control custom-checkbox mb-2">
                            <input class="custom-control-input" type="checkbox" id="si-remember">
                            <label class="custom-control-label" for="si-remember">记住我</label>
                        </div>
                        <a class="font-size-sm" href="#">忘记密码?</a>
                    </div>
                    <button class="btn btn-primary btn-block btn-shadow" type="submit" >立即登录</button>
                </form>

javascript脚本

<script>
    function logins() {
        var bootstrapValidator = $("[name='loginform']").data('bootstrapValidator');
        bootstrapValidator.validate();
        if (bootstrapValidator.isValid())
            $.ajax({
                type: "post",   //方法类型
                url: "/user/login/",
                data: $("[name='loginform']").serialize(),
                success: function(data){
                    
                }
            });
        else return;
    }
</script>

无刷新解决办法

<script>
    $('#signin-tab').submit(function (e) {
        if (e.isDefaultPrevented()) return
        //  PROCESS DATA ...
        $.ajax({
            type: "post",   //方法类型
            url: "/user/login/",
            data: $("[name='loginform']").serialize(),
            dataType: 'json',
            success: function(data){
                if (data=='1'){
                    window.location.reload();
                } else {
                    $("#tsinfo").text('用户名密码错误');
                    setTimeout(function() { $("#tsinfo").hide(); }, 3000);
                }
            }
        });
        return false;//阻止页面刷新
    })
</script>