使用input 的required以及form进行验证时阻止提交后的跳转

在写登陆页面的时候用到原生的input，buttonmform来进行验证，验证通过后会跳转页面/刷新页面。

<form target="iframe_display">
  <div class="card_username card_input">
    <input type="text" required v-model="formData.username">
    <label for="" class="input_label">Username</label>
    <div class="input_bar"></div>
  </div>
  <div class="card_password card_input">
    <input type="text" required v-model="formData.password">
    <label for="" class="input_label">Password</label>
    <div class="input_bar"></div>
  </div>
  <button class="card_go" @click="handleGoLogin">
    <span>Go</span>
  </button>
</form>

解决办法

1. 添加一个隐式的
2. 将form的target指向iframe的name

如下：

代码：

<form target="iframe_display">
  <div class="card_username card_input">
    <input type="text" required v-model="formData.username">
    <label for="" class="input_label">Username</label>
    <div class="input_bar"></div>
  </div>
  <div class="card_password card_input">
    <input type="text" required v-model="formData.password">
    <label for="" class="input_label">Password</label>
    <div class="input_bar"></div>
  </div>
  <button class="card_go" @click="handleGoLogin">
    <span>Go</span>
  </button>
</form>

<iframe id="iframeDisplay" name="iframe_display" style="display: none;"></iframe>