关于表单内按钮自动Submit的问题记录

问题描述

• 我创建了一个表单用于用户手机验证码登录，在填写验证码的input后面加了一个button，界面如下图：

奇怪的事情发生了，我点击完获取验证码，页面会自动刷新，刚开始我还以为是那里执行了路由的刷新，检查了一遍发现没有（开始无能狂怒），

问题解决

静下心仔细看代码，发现button包含在form表单里面，我想会不会是按钮位置的问题，

原来的代码：

<el-form>
    <el-form-item prop="cellPhoneCode" class="cellPhoneCode">
              <el-input v-model="loginFormNoPass.cellPhoneCode" placeholder="请输入手机验证码" />
              <button class="MobileCodeBtn" @click="sendMobileCode">获取验证码</button>
    </el-form-item>
</el-form>

修改后的代码：

<el-form>
    <el-form-item prop="cellPhoneCode" class="cellPhoneCode">
              <el-input v-model="loginFormNoPass.cellPhoneCode" placeholder="请输入手机验证码" />
    </el-form-item>
</el-form>
<button class="MobileCodeBtn" @click="sendMobileCode">获取验证码</button>

但是这样觉得还是很low，于是上网搜索关于form表单中button的问题，发现了这篇博客form表单中button按钮发送请求或者刷新页面的解决办法,简直很好的解决了我的问题，我又麻溜回去制定了一下button的type属性。

终于，问题解决了