zoukankan      html  css  js  c++  java
  • 使用 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;
    		}
    	}
  • 相关阅读:
    nginx解决Ajax跨域问题
    传入token值到下个操作
    获取token值并写入Excel文件中
    读取配置文件.ini
    js判断页面元素是否存在
    SQL Server数据库管理常用的SQL和TSQL语句
    常用聊天工具(IM)在线客服链接代码
    [转]最大概率选择到“最好女孩”的算法
    Web开发:设置复选框的只读效果
    Web开发常用边框颜色汇总
  • 原文地址:https://www.cnblogs.com/logon/p/3169704.html
Copyright © 2011-2022 走看看