js阻止表单提交的两种方法

简介:
<body>
    <form action="clock.html" method="post" onsubmit="return checkLength()">
        <p>name:<input type="text" name="user" id="user"></p>
        <input type="submit" id="submit" name="submit"> 
    </form>
</body>
</html>

~~~

clock.html是一个时钟页面。

    第一种方法:利用event的阻止默认事件机制,页面载入之后获得submit元素,然后为submit注册click响应函数,参数为event事件。

在用户点击submit触发响应函数后,直接event.preventDefault();阻止表单转跳的默认事件。


    第二种方法:在表单form标签下属性onsubmit="return checkLength()"(ie能实现,谷歌不能实现)或 id="submit"的input标签下添加属性 checkLength()"

上面的代码是两种方法的集合,可自己删减。





本文转自 曦羽  51CTO博客,原文链接:http://blog.51cto.com/exist/1955965
相关文章
|
7天前
|
JavaScript 前端开发
javascript操作BOM的方法
javascript操作BOM的方法
15 0
|
2天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
6 2
|
4天前
|
JavaScript 前端开发
在JavaScript中实现模块化开发有多种方法
JavaScript模块化开发可通过CommonJS、AMD和ES6模块实现。CommonJS适用于服务器端,使用`require`和`module.exports`处理模块;AMD(如RequireJS)用于浏览器端,依赖`require`和`define`;ES6模块提供原生支持,使用`import`和`export`。选择方式需考虑项目环境、复杂度和技术栈。
10 4
|
4天前
|
JavaScript 前端开发
JS tostring()和join()方法
JS tostring()和join()方法
7 1
|
4天前
|
存储 JavaScript 前端开发
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
7 0
|
5天前
|
JavaScript 前端开发 索引
js添加、删除、替换、插入元素的方法
js添加、删除、替换、插入元素的方法
10 0
|
6天前
|
JavaScript 前端开发
JavaScript 循环方法详解
JavaScript 循环方法详解
18 1
|
6天前
|
JavaScript 前端开发
JavaScript数字方法详解
JavaScript数字方法详解
17 0
|
6天前
|
存储 JavaScript 前端开发
JavaScript对象方法详解
JavaScript对象方法详解
15 1
|
6天前
|
存储 JavaScript 前端开发
JavaScript字符串方法详解
JavaScript字符串方法详解
17 0