在写登陆页面的时候用到原生的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>
解决办法
- 添加一个隐式的
- 将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>