Vue防止表单重复提交

最新推荐文章于 2024-05-31 09:55:52 发布

温馨提示：

最新推荐文章于 2024-05-31 09:55:52 发布

阅读量7.5k

点赞数

分类专栏：问题解决文章标签：表单重复提交 Vue重复提交

本文链接：https://blog.csdn.net/su330494482/article/details/91789059

版权

问题解决专栏收录该内容

14 篇文章 0 订阅

订阅专栏

有两种方法

    <!DOCTYPE html>
    <html>
    <head>
        <title>页面</title>
        <meta http-equiv="Content-Type" content="textml; charset=UTF-8">
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <!--vue JS-->
        <script src="../../static/js/vue.min.js"></script>
        <!--VUE表单校验JS-->
        <!--<script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-rc.3/vee-validate.min.js"></script>-->
        <script src="../../static/js/vee-validate.min.js"></script>
    </head>
    <body class="loading">
    <div class="wrapper">
        <div class="whole">
            <div class="zhuanz">
                <!--<form id="fm" @submit.prevent="validateBeforeSubmit" method="post">-->
                <form id="fm" method="post">
                    <strong style="text-align:center; ">
                        <!--第一种-->
                        <input type="button" @click="validateBeforeSubmit()" :disabled="isDisabled" value="确认提交">
                        <!--第二种-->
                        <!--<input  type="button" @click.once="validateBeforeSubmit()"  value="确认提交">-->
                    </strong>
                </form>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            Vue.use(VeeValidate, {
                locale: "zh_CN",//中文
            });
           var v= new Vue({
                el: '#fm',
                data: {isDisabled: false},
                methods: {
                    validateBeforeSubmit() {
                        // 禁用按钮
                        this.isDisabled = true;
                        // DOM 还没有更新
                        /*this.$nextTick(function () {
                            // DOM 现在更新了
                            var _this = this;
                        });*/

                        alert(1);
                        // 启用按钮
                        // this.isDisabled = false;
                        /*setTimeout(function () {
                            alert(2);
                            v.isDisabled = false;
                        },3000);*/
                    }
                }
            });
        });

    </script>
    </body>
    </html>

第一种效果，按钮直接禁用，不能点击。

注意:

如果启用按钮this.isDisabled = false;，可能会导致表单重复提交（反正我是遇到过），

应该
setTimeout(function () {
    //alert(2);
    v.isDisabled = false;
},3000);

给个延迟时间。

第二种效果，按钮只能点击一次，第二次点击没有反应

温馨提示：

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue防止表单重复提交

有两种方法 <!DOCTYPE html> <html> <head> <title>页面</title> <meta http-equiv="Content-Type" content="textml; charset=UTF-8"> <...
复制链接

扫一扫