[Javascript]阻止表单Form默认提交(即根据按回车提交)以及vue、iview下的做法

2021-03-24 52点热度 0人点赞 0条评论

前言

虽然很多提交的表单,我们已经改用post来提交数据了,但是还是有一些使用了<form action='xxx'></form>来提交表单,但是我们往往要在表单提交之前,做一些额外的检查或前置代码。

实现

通过增加onsubmit="return false;"使表单默认不提交,然后在需要提交的按钮上,增加手动提交

<form id="form1" action="login" method="post" onsubmit="return false;">
</form>

#Javascript下的手动提交(根据你使用的框架,监听按钮,做一些前置检查等,最后用如下代码提交表单):
document.getElementById('form1').submit();

如果你使用了vue,还可以使用v-on:submit.prevent

<form id="form2" ref="form2" action="login" method="post" v-on:submit.prevent="handleSubmit">
</form>

#Javascript方法:
handleSubmit: function() {
    // 在提交前做一些检查工作
    document.getElementById('form2').submit();
},

如果你使用的是iView,可以使用submit.native.prevent

<i-form id="form3" ref="form3" action="login" method="post" @submit.native.prevent="handleSubmit()"> 
</i-form> 

#Javascript方法: 
handleSubmit: function() { 
// 在提交前做一些检查工作 
// 最后使用ajax提交
},

 

 

admin

这个人很懒,什么都没留下

文章评论

*

code