使用 event.preventDefault 拦截表单的提交
event.preventDefault() 方法 W3C 官方的定义是:取消事件的默认动作,不单单可以拦截表单的提交,<a>标签的跳转,
<input>标签的输入等等默认动作都会被阻止动作或者输入.
但是IE浏览器对event.preventDefault()不支持!
解决方式:
function stopDefault(e){
if(e && e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue = false;
}
}
表单如下:
一:普通的onsubmit 拦截表单
<form action="" name="asd" onsubmit=”return check_method_1()”> <input type="text" name="a"> <input type="submit" name="submit" value="提交"> </form>
二:使用event.preventDefault()拦截表表单
<form action="" name="dsa" method="post"> <input type="text" name="a"> <input type="submit" id="event" value="提交" onclick="check_method_2(event)"> </form>
function check_method_2(event){
e = e || window.event;
if($("form[name='a'] input").val() == ''){
alert('请输入用户名');
if(document.all) e.returnValue = false; //IE,window.event.returnValue = false 阻止元素默认行为
else e.preventDefault();//Chrome,oprea,firefox event.preventDefault() 阻止元素默认行为
}
}
也可以这样写:
$("#event").bind({
click:function(check){
if(!checkAll()){
stopDefault(check);return;//stopDefault来自兼容性处理
}
}
})
表单一和表单二中的拦截都可以写对应的拦截方法,当所有方法返回真实 递交表单,否则阻止。
function checkAll(){
if(check_a() && check_b() && check_c(){
return true;
}else{
return false;
}
}
浙公网安备 33010602011771号