是不是被用户的行为所困扰?

一个表单用户点击提交按钮了N次,这也导致了数据提交了N次。

为了此受到了测试的欺辱,受到了老板的批评?

不用怕,它就是来拯救你的。

第一步:打开命令行,敲入 composer require light\yii2-lock-form=~1.0.0

第二步:上个厕所

第三步:如果你的项目中已经使用了 yii2-bootstrap, 那么好,只需要在的你的 AppAsset 「whatever, 只要你全局依赖的就成」

轻轻的敲入:

'depends' => [
//other depends
'light\widgets\LockBsFormAsset'
]

如果你没使用 yii2-bootstrap 也能满足您:你只需要将 light\widgets\LockBsFormAsset 替换成 light\widgets\LockFormAsset.

还需要做什么?

如果还需要做的话,那就是定制一下 Lock 用语,

Html::submitButton('提交', ['data-loading-text' => '正在提交数据, 不让你点,哼'])

说了这么多,东西在那儿?

https://github.com/lichunqiang/yii2-lock-form

重要的事情要说三遍:star,star, star, little star, 一闪一闪亮晶晶。

GetYii 目前的做法是简单粗暴的做法,在全局 js 中添加下面 js:

// 防止重复提交
$('form').on('beforeValidate', function (e) {
$(':submit').attr('disabled', true).addClass('disabled');
});
$('form').on('afterValidate', function (e) {
if (cheched = $(this).data('yiiActiveForm').validated == false) {
$(':submit').removeAttr('disabled').removeClass('disabled');
}
});
$('form').on('beforeSubmit', function (e) {
$(':submit').attr('disabled', true).addClass('disabled');
});

来源:http://www.getyii.com/topic/261

yii2-lock-form 也许这就是你想要的,阻止表单多次提交的更多相关文章

  1. form表单input回车提交问题

    问题:文本框输入完成后点击回车页面刷新问题出在form上,当表单中只有一个文本框的时候获取焦点并点击回车之后会提交表单内容,就会发生刷新事件. 解决方法: 1.增加一个隐藏的输入框 <input ...

  2. jQuery form插件的使用--使用 fieldValue 方法校验表单

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  3. jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...

  4. form表单验证失败,阻止表单提交

    form表单验证失败,阻止表单提交 效果演示: 贴上完整代码: <!DOCTYPE html> <html lang="en"> <head> ...

  5. 防止表单提交时刷新页面-阻止form表单的默认提交行为

    最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...

  6. 【转】document.form.action,表单分向提交

    document.form.action,表单分向提交,javascript提交表单 同一个表单可以根据用户的选择,提交给不同的后台处理程序.即,表单的分向提交.如,在编写论坛程序时,如果我们希望实现 ...

  7. form表单Get方式提交时,action中带参数传递不了

    <form action="getPostServlet/getPost.do?param4=param4" method="get"> <i ...

  8. form 表单跨域提交

    <!DOCTYPE html><html> <head> <title>form 表单上传文件</title> <script src ...

  9. 序列化多个form表单内容同时提交

    一.首先将表单主体序列化为json对象. 方法: //将表单序列化为json,这里加了个jQuery的扩展方法 $.fn.serializeJson = function () { var resul ...

随机推荐

  1. EEPlat的元模型体系

    EEPlat的元模型体系是元数据驱动的必要条件之中的一个.仅仅有通过元模型可以完好的描写叙述一个软件系统.才可以完整的定义该软件系统的元数据,也才干真正实现软件系统的元数据驱动式开发.也就意味着一个软 ...

  2. hive 添加UDF(user define function) hive的insert语句

    add JAR /home/hadoop/study/study2/utf.jar; package my.bigdata.udf; import org.apache.hadoop.hive.ql. ...

  3. 超级拷贝scp

    scp -r 超级拷贝,其是ssh的一个组件,通过ssh访问来拷贝文件.首先保证已安装openssh-server. 用法:scp -r 目标用户名@目标ip:目标文件绝对路径  存放位置 $ scp ...

  4. JavaScript 函数和事件

    上面例子中的 JavaScript 语句,会在页面加载时执行. 通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时. 如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用 ...

  5. JPA(Java Persistence API)Java持久化API-介绍

    JPA全称: Java Persistence API JPA的宗旨是为POJO提供持久化标准规范,能够脱离容器独立运行,很方便开发和测试.JPA通过JDK 5.0注解或XML描述对象-关系表的映射关 ...

  6. goldengate原理与简单配置

    goldengate的原理:http://www.ipresst.com/works/52bc44c42954a7d73b0003f2 简单单向配置: 在oracle官网下载下载 GoldenGate ...

  7. 在iframe的父级作用域操作,ifame中的元素。。

    frames["iframe的name"].SchDatas SchDatas为方法名js中 frames["iframe的name"].document.ge ...

  8. python3----函数(map)

    map()函数 map()是 python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把函数 f 依次作用在 list 的每个元素上,得到一个新的 list 并返回. 例如,对于li ...

  9. linux中使用vi 打开文件时,能显示行号

    方法一: 1.显示当前行行号,在VI的命令模式下输入 :nu 2.显示所有行号,在VI的命令模式下输入     :set nu方法二: 使用vi编辑~/.vimrc文件,在该文件中加入一行" ...

  10. 【剑指Offer面试题】 九度OJ1518:反转链表

    与其非常快写出一段漏洞百出的代码,倒不如细致分析再写出鲁棒的代码. 提前想好測试用例(输入非空等等)进行測试改动代码. 题目链接地址: http://ac.jobdu.com/problem.php? ...