分类 javascript 下的文章

双击提交按钮导致数据重复提交的解决方法

1426932345.jpg
某WEB项目在交测试团队测试时,发现如下问题:

当连续快速点击提交按钮时,会提交多次重复的记录。

经过分析,我们首先想到了服务端判断是否重复记录的方法:

当提交记录时,判断某session值是否已被设置。
如果未被设置,则设置该session值,并继续执行。
如果已被设置,则终止执行。

但在实际测试中,由于表单提交到服务器端所需的时间通常由网速觉得,一旦该时间>用户双击间隔,则会导致session未设置生效,第二条数据已经提交过来了。
失败!

后来想到,必须在客户端进行判断,最快的方法是js

js端方法(可用):

js中定义一个全局变量m
当点击提交按钮时,执行check_submit函数
该函数第一行即给m++
接下来判断m的值,如果m>1,则表示是重复提交,可弹出提示,防止用户重复点击
如果m<=1,表示是首次提交,则正常执行提交流程。

关键代码如下:

var m = 0;
function check_submit(){
    m++;
    if(m > 1){
        alert('请勿重复提交!');
        return false;
    }else{
        return true;
    }
}

js常用代码

QQ20150227-15.png

目录

表单验证

表单验证

正则方法验证银行卡号是否符合规则

function check_num(){
    var obj =  document.getElementbyId('cardnum');
    var reg = /^\d{15,19}$/;
    if(reg.test(obj.value)){
        alert('是银行卡号!');
        return true;
    }else{
        alert('不是银行卡号!');
        return false;
    }
}

正则方法验证金额是否符合规则(大于0的正数)

function check_num(){
    var obj =  document.getElementbyId('cardnum');
    var reg = /^\d+(?=\.{0,1}\d+$|$)/;
    if(reg.test(obj.value)){
        alert('非0是正数!');
        return true;
    }else{
        alert('不是非0正数!');
        return false;
    }
}