最近做的项目一直有这样的一个场景:
一个表单里面里有输入框 要你输入值 然后点击一个按钮 校验输入的值是否合法 是否满足。。。某某条件等等校验规则 都满足了 我们就提交后台了。然而不经意间发现一个问题 某个页面 如下 在输入框里点击回车竟然直接提交了页面 绕过了我层层的校验 我的程序就 错了。
一、打开记事本 写下如下代码
<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();//提交表单
}
}