vue中阻止表单自动提交

有时候我们在用vue项目时，肯定会遇到这样的问题，业务中需要用到form，但是点击提交按钮会触发form的默认提交，如果用在form上绑定return false，需要单独写验证函数和接收到数据后对数据的处理函数，这样非常不方便，有没有办法阻止form自己的默认提交，在点击提交按钮或者在输入框聚焦时点回车，我们根据自己的需求处理数据呢？

很简单，vue中的@submit.prevent属性可以帮我们实现这个功能，当我们点击提交按钮时，表单并不会提交，而是会触发绑定的函数，就像下边的onSubmith函数一样，我们可以在函数里做想做的事情，比如参数完整性验证，ajax提交，对后台数据的处理等等。

 // html<form  autocomplete="off" @submit.prevent="onSubmit" action="https://www.baidu.com"><input type="text" /><button type="submit">提交</button></form>

 // jsmethods: {onSubmit: function () {// 阻止默认表单提交// 做你自己想做的事，比如ajax请求后台数据return false;}}

vue中阻止表单自动提交相关推荐

Validation阻止表单自动提交，使用Ajax提交表单（使用Validation的submitHandler方法）
在使用Validation时,我们有时候不希望验证成功后直接跳转页面(比如判断登录密码用户名正确与否),而希望自己使用Ajax提交,并且验证回调的结果. $('.login-form').valida ...
php中在使用js_提交的表单不为空_为什么显示等于,php编程，这段代码为什么不能阻止表单的提交！不管为不为空都跳转到1.php页面啦这是怎么回事？...
php编程,这段代码为什么不能阻止表单的提交!不管为不为空都跳转到1.php页面啦这是怎么回事? 关注:292 答案:5 mip版解决时间 2021-01-12 06:43 提问者夜落花台 ...
php 表单提交及验证 tp,ThinkPHP表单自动提交验证实例教程
ThinkPHP表单自动提交验证实例教程附加规则配合验证规则使用,包括: function 使用函数验证,前面定义的验证规则是一个函数名 callback 使用方法验证,前面定义的验证规则是一个当 ...
Html 中表单提交的一些知识总结——防止表单自动提交，以及submit和button提交表单的区别...
转自:http://jackaudrey.blog.163.com/blog/static/1314217882010590041833/ 在页面中有多个input type="text&q ...
vue的form表单在提交成功后置空
vue的form表单在提交成功后置空 form表单说明 :form表单加上属性值 ref="form" 点击事件加入 roleManager.$refs['form'].rese ...
取消回车表单自动提交
做分页查询,页面跳转的问题. 由于要传递的参数不仅仅是需要跳转的页码,还有一些偏移量等数据,所以不能通过回车直接提交, 而是通过一个方法,在该方法中设置相应的数据,再提交表单. 所以需要屏蔽掉表单回车 ...
Form表单自动提交
表单提交是提交到指定的地址. 知识点: 1.创建一个项目,引入需要用到的CSS.JS.jQuery文件.既然是表单就会使用栅格布局. 2.栅格布局就要使用到contain ...
laravel中防止表单重复提交的综合解决方案
[本文转载自Hyes]http://www.hao124.net/article/14 怎样防止表单重复提交,通过搜索引擎能搜到很多结果,但很零散,系统性不强,正好前几天做了这个功能,决定记录下来. ...
Spring Boot中防表单重复提交以及拦截器登录检测
目录理论演示源码理论在用户登录后,如果按F5刷新会出现表单重复提交的问题,解决这个问题后,如果没有拦截器登录检测,就会造成,任意用户可以登录后台界面,所以要有拦截器登录检测. 相关的逻辑步骤 ...

vue中阻止表单自动提交

vue中阻止表单自动提交相关推荐

最新文章

热门文章