使用 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;
		}
	}

posted on 2013-07-03 16:08  logon  阅读(3897)  评论(2编辑  收藏  举报