众所周知,在表单中加上onsubmit="return false;"可以阻止表单提交。
下面是简单的一小段代码:
js代码:
1 <form action="index.jsp" method="post" onsubmit="submitTest();">
2 <INPUT value="www">
3 <input type="submit" value="submit">
4 </form>
5
6 <SCRIPT LANGUAGE="JavaScript">
7 <!--
8 function submitTest() {
9 // 一些逻辑判断
10 return false;
11 } 12 //-->
13 </SCRIPT>
大家判断像上面的写法,点击submit按钮该表单是否提交?
实际情况是表单正常提交,若想它不提交,应该将
js代码:
1 <form action="index.jsp" method="post" onsubmit="submitTest();">
改为
js代码:
1 <form action="index.jsp" method="post" onsubmit="return submitTest();">
原来onsubmit属性就像是<form>这个html对象的一个方法名,其值(一字符串)就是其方法体,默认返回true;
和Java一样,在该方法体中你可以写任意多个语句,包括内置函数和自定义函数,如
js代码:
1 onsubmit="
2 alert('haha'); // 内置函数
3 submitTest(); // 自定义函数
4 alert(this.tagName); // 用到了this关键词
5 ......(任意多条语句)
6 returnfalse;
7 "
就相当于
java代码:
1 Form.prototype.onsubmit = function(){ 2 alert('haha'); // 内置函数
3 submitTest(); // 自定义函数
4 alert(this.tagName); // 用到了this关键词
5 ......(任意多条语句)
6 returnfalse;
7 };
这样的话你就覆写了(override)其默认方法(默认返回true)
大家注意到方法体中可以用this这个关键词,这里即代表了<form>的对象实例。
经过这样的分析后,以上情况就不难理解了:
java代码:
1 <form action="index.jsp" method="post" onsubmit="submitTest();">
这样写,override方法的效果为:
java代码:
1 Form.prototype.onsubmit = function(){ 2 submitTest();
3 };
在这里submitTest()虽然返回false,但我们只执行了此函数,没有对其结果进行任何处理。而
java代码:
1 <form action="index.jsp" method="post" onsubmit="return submitTest();">
override方法的效果为:
java代码:
1 Form.prototype.onsubmit = function(){ 2 return submitTest();
3 };
这样,我们利用到了它的返回值,达到了预期效果。
这样理解的话我想印象会深刻得多,就不易出错了
结论:
我们可以用Java里的思维方式来思考模拟JavaScript中的类似情况(JavaScript中基于prototype的面向对象技术也确实是这样做的),但他们毕竟还是有本质上的区别,如Java是强类型的,有严格的语法限制,而JavaScript是松散型的。象上述方法:
java代码:
1
2 Form.prototype.onsubmit = function(){
3 };
既可以有返回值,又可以没有返回值,在Java里是通不过的,毕竟Java里面不能靠方法的返回值不同来重载(overload)方法,而JavaScript中的重载要松散得多。
分享到:
相关推荐
JavaScript阻止表单提交是网页开发中常见的需求,主要用于在用户提交数据前进行验证或处理,以确保数据的有效性和安全性。本文将详细介绍两种阻止表单提交的方法,并解释`onSubmit`和`check()`的区别。 ### 第一种...
首先,我们来看如何使用return false来阻止表单提交。在JavaScript中,表单提交是通过点击提交按钮触发的,这是一个典型的事件处理过程。当用户点击提交按钮时,会触发一个事件,这个事件会调用一个函数。在这个函数...
该函数用于检查输入框是否为空,如果为空,则弹出提示框并聚焦到该输入框上,阻止表单提交。 ##### 7. 密码一致性比较 ```javascript function CheckForm() { if (document.form.PWD.value != document.form.PWD_...
10. **计时器控制**:设置一个短暂的计时器,在这段时间内阻止表单提交,如: ```javascript setTimeout(function() { submitButton.disabled = false; }, 5000); // 5秒后恢复提交按钮 ``` 在实际应用中,应...
例如,如果用户未选择任何选项就尝试提交,我们可以使用JavaScript阻止表单提交并显示提示信息: ```javascript $('form').on('submit', function(event) { if ($('input[name=choice]:checked').length == 0) { ...
2. `addEventListener`:监听`submit`事件,阻止默认的表单提交,通过自定义函数验证数据。 ```javascript document.getElementById('myForm').addEventListener('submit', function(e) { e.preventDefault(); // ...
// 阻止默认的表单提交行为 $.ajax({ url: $(this).attr('action'), type: $(this).attr('method'), data: $(this).serialize(), success: function(response) { // 处理返回的数据 }, error: function(xhr...
JavaScript(简称JS)是一种轻量级的脚本语言,常用于网页和网络应用开发,能够对用户交互进行实时响应。在在线考试系统中,定时提交表单是一个关键功能,它确保考生在规定时间结束后自动提交试卷,防止作弊并保证...
在使用Layui设计表单时,经常会遇到表单提交后页面刷新导致的重复提交问题。为了解决这个问题,开发者需要确保表单只提交一次,防止不必要的数据重复处理或者服务器的重复计算。下面详细解释几种防止Layui表单重复...
如果超出,则使用`alert()`显示提示信息,并利用`focus()`让焦点返回到该文本框上,最后返回`false`以阻止表单提交。 - **应用场景**: 常用于限制用户输入的长度,避免数据过长导致的问题。 ### 2. 邮箱格式验证 `...
- `用JS控制表单提交`: 展示如何使用JavaScript控制表单的异步提交过程。 - `javascript提交表单__超超聊事.files`: 可能是一份关于JavaScript表单提交技术的详细讲解资料。 7. **最佳实践** - 提供即时反馈:...
4. **处理结果**:如果验证失败,可以显示错误信息,阻止表单提交;如果验证成功,允许表单继续提交。 压缩包中的文件"jiaoben181515"可能是示例代码的源文件,可能包含HTML、CSS和JavaScript文件,用于展示如何...
如果验证失败,将弹出警告信息,并阻止表单的进一步提交。 在实际项目中,我们可能还需要处理更复杂的验证场景,比如检查手机号码、日期格式,或者确保输入的密码与确认密码一致。这时,可以创建更复杂的正则表达式...
例如,可以使用`event.preventDefault()`阻止表单的默认提交,然后通过Ajax异步提交数据。 4. **CSS样式设计** css文件用于美化表单界面,包括布局、颜色、字体等。可以使用CSS选择器来定位表单元素,如`.form-...
综上所述,"JS用户反馈表单提交代码"可能涉及的关键技术有:JavaScript事件监听、表单数据的获取与封装、异步提交(如使用fetch或jQuery的ajax)以及错误处理。通过这些技术,开发者可以创建一个用户体验良好的用户...
本文将探讨在使用layui框架的情况下,如何在表单提交之后重新加载数据表格。 首先,让我们来分析一下使用的layui组件。Layui是一个前端UI框架,它提供了一套模块化的组件,方便开发者快速开发界面。其中,form模块...
`阻止表单提交。对于`<button>`,因为其不具有自动提交功能,所以需要在JavaScript中手动调用`submit()`方法来提交表单。 3. **表单级事件处理**:使用`onsubmit`事件处理函数,可以为整个表单添加验证逻辑。当表单...
比如,当用户填写表单并点击提交时,JavaScript会捕获这个事件,阻止默认的表单提交行为,然后发送一个Ajax请求到服务器。这个请求通常通过JSON格式传输数据,服务器端的Action方法处理这些数据,完成后返回JSON或...