才趟过的一个坑,css造成的Validform表单提交按钮点击无效

时间:2021-09-09 07:49:15

  最近入手的一个项目,在开发的过程中,遇到了一个以前没遇到过的问题,废了半天的功夫才弄懂原因,留下足迹,警醒后人,下面开始讲故事啦!

  在一个昏天暗地的上午,我一个人照常坐在办公室安静的工作中!项目编码已经初步完成啦,下一步自己全套流程测试一下。

  登录-权限-添加数据,嗯PC好像都没问题,能正常运行。继续到手机上测试下,嗯,好像也没问题!也能运行。但感觉好像那点不对劲,静下心想两分钟。

  歇后~ 。再捣鼓一下,好像是出问题了,在我新打开的登录页面中,好像登录按钮第一次点击无效啊!赶紧多测试几下,发现确实是无效,自言自语:“咦,尼玛这是什么鬼情况!!!”,赶紧看下其他页面是不是一样的。

  经过两分钟的观测,爆了个粗口:“卧槽!以前(以前的项目)就好好的,现在给老子出这种鬼问题!!!”,赶紧看看以前的案例,是不是少引用了js文件。

  十分钟后,不对啊,没少啊!难道是js文件引用顺序问题!说道就开始做,按照关系重新排列了一次所有js文件顺序,排完F5,两分钟.....才高兴两分钟,我的心情又变坏了,不是js文件顺序的问题,赶紧想想!还有没有其他可能?火气太大,不行,我要先喝口水再说!

  正喝水中!突然眼睛一睁,好像有种可能,是不是js文件冲突啦!很有可能,说不定是js绑定了其他事件,造成的点击无效!我感觉我自己好像找到了问题的根源。现在是使用万能的排除法的时候啦!马上开始动手,把所有的无关的js注释掉了,只保留了jquery,和Validform.js。继续F5,跑一跑试试,第三次爆粗口:“卧槽!不是这个原因!到底是什么鬼情况啊!啊aa”。

  不行啦!不行啦!肚皮都饿了!先去吃饭再说,回来看看官方文档,论坛社区有没有相关问题!

  有时候啊!程序员真是世界上最积极的动物啦!心中想着这个bug,我以最快的速度囫囵吃完,回到办公室继续捣鼓我的问题!

  看了官方的文档,我尝试着改变了(tiptype)参数值,由4改成1。“咦!瞎猫撞死耗子!居然撞到了,现在能提交了!这真是一种..........”

$("#loginForm").Validform({
tiptype: 1,
ajaxPost: true,
callback: function (e) {
if (e && e.status == "y") {
layer.msg(e.info, { icon: 6 });
window.location.href = "/Project/Index";
} else {
layer.msg(e.info, { icon: 2 });
}
}
});

  不过我不能用他这个参数啊!我要(tiptype=4)才行啊!以前项目都是用的这个都没出问题晒!难道以前的项目中存在什么特殊的配置?问题是人家官网demo都没问题呀!看来我还是没找到问题的根源,又一次的失望,郁闷。这次已经没心情爆粗口了。只有叹气叹气.....

  我像我需要静静,把脑壳冷静下来,才能更敏锐的找出问题!仔细回想一下,到底是什么时候出的问题!最开始不是这样的。

  从我编写完登录页面,当时是正常的!后来我没去改过呀!怎么就出问题了呢?好像我改过公共的css,难道这个东东还受css影响?不得不说,人啊!有时候脑洞大开,什么想法都能产生。不管了,我的性格是有可能就要去尝试,反正多动手不吃亏吗。一试,真的好像是css的问题

  

.Validform_checktip{
/*margin-left:8px;
line-height:20px;
height:20px; 这是影响的css部分*/
overflow:hidden;
color:#999;
font-size:12px;
}

  当时css是我为了缩小行宽注释掉的,取消注释,表单提交按钮的功能就正常啦!给大家看下页面对比

  才趟过的一个坑,css造成的Validform表单提交按钮点击无效

  请大家仔细看看密码输入框和登录按钮的间距,这种情况下我马上点击登录按钮是没有提交表单的!只是触发了验证,变成下面这个效果

才趟过的一个坑,css造成的Validform表单提交按钮点击无效

  大家仔细看下,登录按钮和密码框的距离和上图已经不一样了,因为显示了验证成功的文字!这时候再次点击登录按钮,提交了表单

  如果我取消上面css注释的部分!点击登录按钮就会提交表单,页面就变成下图

才趟过的一个坑,css造成的Validform表单提交按钮点击无效

  仔细观测,密码输入框和登录按钮间距在验证前后都没有发生改变!和css注释是,验证后的距离等同。

  经过我的多次测试,最终得出结果:

    当css注释掉高度时,点击登录按钮,实际上是触发了密码输入框的焦点移除事件!进行了数据验证,而数据验证的结果显示撑大了密码输入行的高度。

    这时候,登录按钮实际上的位置已经不再原来的位置了,故点击无效!有时候在点击登录按钮底部部分,表单一样提交,原因就是登陆按钮坐标还没有超出以前的范围,故响应了点击事件!

  以上就是我本次趟坑趟出来的经验,这种情况很少见。不知道有没有同仁遇到过,嘿嘿嘿

  本人第一次写博客,谢谢大家观看,写的有点啰嗦,还有点小情绪。希望大家多多提提宝贵的意见,踊跃发言

  最后:不知道我的结果对了没有!希望园里的大咖多多指教