`

阻止表单提交

阅读更多

 

关于enent.preventDefault() 和 event.stopPropagation()

 

event.preventDefault() 

该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。 

 

event.stopPropagation() 

该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。 

 

event是DOM的事件方法,所以不是单独使用,比如指定DOM 

 

由于只看到你的代码片段,无法准确判断全部的问题,你试试下面的方法: 

将 

event.preventDefault(); 

改成 

e.preventDefault();

 

 

分享到:
评论

相关推荐

    JavaScript阻止表单提交方法(附代码)

    JavaScript阻止表单提交是网页开发中常见的需求,主要用于在用户提交数据前进行验证或处理,以确保数据的有效性和安全性。本文将详细介绍两种阻止表单提交的方法,并解释`onSubmit`和`check()`的区别。 ### 第一种...

    利用JavaScript阻止表单提交的两种方法

    首先,我们来看如何使用return false来阻止表单提交。在JavaScript中,表单提交是通过点击提交按钮触发的,这是一个典型的事件处理过程。当用户点击提交按钮时,会触发一个事件,这个事件会调用一个函数。在这个函数...

    阻止表单提交按钮多次提交的完美解决方法

    本文将详细探讨如何阻止表单提交按钮的多次提交,确保数据的一致性和正确性。 首先,理解问题的根源。当用户快速连续点击提交按钮,特别是在网络延迟或页面响应较慢的情况下,浏览器可能会发送多个请求,导致表单...

    javascript方式防止表单重复提交

    10. **计时器控制**:设置一个短暂的计时器,在这段时间内阻止表单提交,如: ```javascript setTimeout(function() { submitButton.disabled = false; }, 5000); // 5秒后恢复提交按钮 ``` 在实际应用中,应...

    js提交表单及js表单验证

    该函数用于检查输入框是否为空,如果为空,则弹出提示框并聚焦到该输入框上,阻止表单提交。 ##### 7. 密码一致性比较 ```javascript function CheckForm() { if (document.form.PWD.value != document.form.PWD_...

    onsubmit阻止form表单提交与onclick的相关操作

    本文将详细讲解如何使用`onsubmit` 阻止表单提交以及与`onclick` 的相关操作。 1. **`return false` 的作用** 当在表单的`onsubmit`事件处理器中设置`return false`时,可以阻止表单的默认提交行为。这是因为...

    html5单选框表单提交代码.zip

    例如,如果用户未选择任何选项就尝试提交,我们可以使用JavaScript阻止表单提交并显示提示信息: ```javascript $('form').on('submit', function(event) { if ($('input[name=choice]:checked').length == 0) { ...

    JS去掉字符串前后空格、阻止表单提交的实现代码

    例如,在上述内容中,如果文本框输入为空,则调用alert函数显示提示信息,并通过返回false阻止表单提交。 - 使用jQuery:可以使用类似的方法,通过绑定onsubmit事件来调用一个处理函数。在该函数中同样进行验证,...

    登陆界面表单提交js特效.zip

    4. **处理结果**:如果验证失败,可以显示错误信息,阻止表单提交;如果验证成功,允许表单继续提交。 压缩包中的文件"jiaoben181515"可能是示例代码的源文件,可能包含HTML、CSS和JavaScript文件,用于展示如何...

    【JavaScript源代码】HTML form表单提交方法案例详解.docx

    `阻止表单提交。对于`<button>`,因为其不具有自动提交功能,所以需要在JavaScript中手动调用`submit()`方法来提交表单。 3. **表单级事件处理**:使用`onsubmit`事件处理函数,可以为整个表单添加验证逻辑。当表单...

    js提交表单及js表单验证大全

    如果超出,则使用`alert()`显示提示信息,并利用`focus()`让焦点返回到该文本框上,最后返回`false`以阻止表单提交。 - **应用场景**: 常用于限制用户输入的长度,避免数据过长导致的问题。 ### 2. 邮箱格式验证 `...

    form表单的异步回调方法

    2. **阻止默认行为(Preventing Default Behavior)**:为了阻止表单提交导致的页面刷新,可以监听表单的`submit`事件,并在事件处理函数中调用`event.preventDefault()`。这样,表单数据会被收集,但不会进行实际的...

    表单验证js 提交前验证

    返回值为`false`会阻止表单提交。 3. **配置验证规则**:每个表单字段可能需要设置不同的验证规则,可以通过类名或数据属性来指定。 4. **错误提示**:当验证失败时,如何显示错误信息,可能是通过改变元素样式或...

    如何防止回车(enter)键提交表单

    另外,我们也可以将事件处理函数写在特定的输入元素上,例如文本框`<input>`,当用户在该输入框内按下回车时,事件处理函数会阻止表单提交。如下例所示: ```html ();"> ``` 然后定义`gosearch`函数: ```...

    JavaScript event(事件) 字符串长度控制及Form表单提交控制

    如果用户名为空,它会显示一个警告,并返回`false`阻止表单提交。否则,它返回`true`允许表单正常提交。 通过理解和熟练运用这些JavaScript基础知识,你可以创建更动态、响应式的网页,并提供更好的用户体验。记住...

    HTML5意见反馈提交表单页面模板.zip

    这通常涉及到对输入字段的值进行验证,如果发现某个字段为空,就会显示错误消息或阻止表单提交。 4. **联系方式验证**:在提交表单前,系统会检查用户提供的联系方式(如电子邮件地址)是否有效。这通常通过正则...

    防止Layui form表单重复提交的实现方法

    在使用Layui设计表单时,经常会遇到表单提交后页面刷新导致的重复提交问题。为了解决这个问题,开发者需要确保表单只提交一次,防止不必要的数据重复处理或者服务器的重复计算。下面详细解释几种防止Layui表单重复...

Global site tag (gtag.js) - Google Analytics