Form表单 回车键 防止未校验直接提交

最近做的项目一直有这样的一个场景: 
一个表单里面里有输入框 要你输入值 然后点击一个按钮 校验输入的值是否合法 是否满足。。。某某条件等等校验规则 都满足了 我们就提交后台了。然而不经意间发现一个问题 某个页面 如下 在输入框里点击回车竟然直接提交了页面 绕过了我层层的校验 我的程序就 错了。

一、打开记事本 写下如下代码

<script>
        function check(){
       }
</script>
<form action="#" method="post">
    <input type="text" />
    <input type="button" value="提交" onclick="check()"></input>
</form>

打开页面,当你在输入框内按下回车 想想会发生什么 没错他提交了而且如果有校验也没用

二.怎么解决呢
常用方法:当然是在form上添加onsubmit 属性了
<

script>
    function check(){
        return false;
    }
</script>
<form action="#" method="post" onsubmit="return check();">
    <input type="text" />
</form>

偶然发现:不过我这块有个页面超复杂用onsubmit 感觉逻辑处理起来太烦锁而且易出错
所以 我就禁止了他的回车提交表单(在谷歌下测试好使。。。其他的懒得测试了)。
代码敬上:

<form action="#" method="post">
    <input type="text" />
    <input type="text" style="display:none"/>
</form>

type 必须是text 若一个form里面本来就有多个text的input就不用加这个了
(意思就是 表单里面必须有两个或以上 的text才能阻止enter事件)

补充(2016/03/07):今天又发现一个雷同的问题 表单里面有很多被div包裹的input输入框 按钮是
<button onclick="check()"></button> 不是 <input type="button" onclick="check()"/> 点击按钮 其实js中的提交表单没走 表单也提交了,直接把button 换成 input type=”button”吧 这样的问题很奇怪 也不知道为什么。

function check(){
    if(false){
        form.subbmit();//提交表单
   }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值