Form 提交表单的时候 避免跳转页面，用js控制

Form 提交表单的时候 避免跳转页面，用js控制

前言

当下的前端开发，在提交表单的很多时候，既需要能回车提交，又不想跳转页面，此时就需要用 js 控制。

需求：能回车提交数据，不跳转页面

例子：

HTML

<form method="post" id="regForm" onsubmit="loginSubmit()">
    <div class="input-group">
        <label for="email">邮箱</label>
        <input type="text" name="email" id="email" >
    </div>
    <div class="input-group">
        <label for="password">密码</label>
        <input  name="password" type="password" id="password">
    </div>
    <button class="btn" type="submit" >登录</button>
</form>

JS

function loginSubmit(){
	event.preventDefault()
}

实现原理

在 form 上添加 onsubmit 事件，并指向处理数据提交的方法。

方法内部用 event.preventDefault() 移除 form 自动跳转的动作。（vue可以直接 @submit.prevent="loginSubmit()"）