解決vue表單為空也能提交的問(wèn)題
更新時(shí)間：2022年06月01日 10:57:54 作者：ShiyuTim
這篇文章主要介紹了解決vue表單為空也能提交的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue表單為空也能提交
今天在用Vue寫表單驗(yàn)證的時(shí)候，習(xí)慣性把v-model綁定的值設(shè)置為null，然后再測(cè)試的時(shí)候，發(fā)現(xiàn)如果填寫了表單后，又刪除輸入的內(nèi)容，竟然能提交上去，百思不得其解。
最后通過(guò)vue devtools這個(gè)工具找到了問(wèn)題所在。
大概是這樣寫的
<input v-model="ipt" ?/>
data () {
????return {
????????ipt: null,
????}
}
if(this.ipt !== null) {
?? ?axios.post()...
}研究了老半天，最后通過(guò)vue工具發(fā)現(xiàn)最初設(shè)置ipt的值為null，當(dāng)表單輸入內(nèi)容，又刪除之后，雖然內(nèi)容不見(jiàn)了，但是ipt的值變?yōu)榱?#39;'，這樣就不能通過(guò)簡(jiǎn)單的!== nulll來(lái)判斷了。
if(this.ipt !== null && ?this.ipt) {
?? ?axios.post()...
}vue的表單提交方式
每次做項(xiàng)目都會(huì)用，也會(huì)踩一些坑，這里統(tǒng)一整理一下，當(dāng)個(gè)模板用
vue表單收集和提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<form :model="form" @submit.prevent="submit">
<div>
<label>用戶名
<input v-model.trim="form.username" type="text" placeholder="請(qǐng)輸入用戶名">
</label>
</div>
<div>
<label>密碼
<input v-model="form.password" type="password" placeholder="請(qǐng)輸入密碼">
</label>
</div>
<div>
<label>頭像<input type="file" @change="handleChange"></label>
</div>
<div>
<label>姓名
<input v-model.trim="form.name" type="text" placeholder="請(qǐng)輸入您的姓名">
</label>
</div>
<div>
<label>性別
<label><input v-model="form.sex" type="radio" name="sex" value="male">男</label>
<label><input v-model="form.sex" type="radio" name="sex" value="female">女</label>
</label>
</div>
<div>
<label>年齡
<input type="number" v-model.number="form.age" placeholder="請(qǐng)輸入年齡">
</label>
</div>
<div>
<label>愛(ài)好
<label>
<input v-model="form.hobby" type="checkbox" value="study">學(xué)習(xí)
</label>
<label>
<input v-model="form.hobby" type="checkbox" value="games">打游戲
</label>
<label>
<input v-model="form.hobby" type="checkbox" value="eat">吃飯
</label>
</label>
</div>
<div>
<label>所屬校區(qū)
<select v-model="form.campus">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武漢</option>
</select>
</label>
</div>
<div>
<label>其他信息
<textarea v-model.lazy="form.other" style="vertical-align: middle;" cols="30" rows="10"></textarea>
</label>
</div>
<div>
<label>
<input v-model="form.accept" type="checkbox">
閱讀并接受<a rel="external nofollow" >《用戶協(xié)議》</a>
</label>
</div>
<div>
<button>提交</button>
</div>
</form>
</div>
<script src="lib/vue.js"></script>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: '#app',
data() {
return {
form: {
hobby: []
},
image: {}
}
},
methods: {
submit() {
console.log(this.form);
//在這里進(jìn)行上傳（axios、ajax）
},
handleChange(event) {
let file = event.target.files[0]
this.form.image = file
}
},
})
</script>
</body>
</html>
上述代碼有三點(diǎn)需要說(shuō)明
- 在<form>標(biāo)簽中出現(xiàn)了:model="form"，這是為了將form中的各項(xiàng)數(shù)據(jù)動(dòng)態(tài)收集到vue的data中的form對(duì)象中，方便統(tǒng)一管理
- form標(biāo)簽上的@submit.prevent為提交時(shí)阻止表單的默認(rèn)行為（跳轉(zhuǎn)）
- v-model.trim是將輸入的數(shù)據(jù)去除前后的空格；v-model.number是轉(zhuǎn)換為Number類型；v-model.lazy是失去焦點(diǎn)后再把數(shù)據(jù)渲染到頁(yè)面上
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue3批量異步更新是如何實(shí)現(xiàn)的，文中的示例代碼簡(jiǎn)潔易懂，具有一定的借鑒價(jià)值，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
vue3.0實(shí)現(xiàn)移動(dòng)端電子簽名組件
這篇文章主要為大家詳細(xì)介紹了vue3.0實(shí)現(xiàn)移動(dòng)端電子簽名組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文件上傳和下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue3.0實(shí)現(xiàn)圖片預(yù)覽組件(媒體查看器)功能
最近項(xiàng)目中有個(gè)場(chǎng)景，一組圖片、視頻、音頻、文件數(shù)據(jù)，要求點(diǎn)擊圖片可以放大預(yù)覽，左右可以切換音視頻、文件，支持鼠標(biāo)及各種鍵控制?縮放，左右旋轉(zhuǎn)，移動(dòng)等功能,這篇文章主要介紹了Vue3.0實(shí)現(xiàn)圖片預(yù)覽組件(媒體查看器),需要的朋友可以參考下2023-12-12
隨著互聯(lián)網(wǎng)的發(fā)展,PDF?文件在信息交流和文檔分享中起著重要的作用,通過(guò)在?Vue?組件中實(shí)現(xiàn)?PDF?預(yù)覽功能,我們可以為用戶提供便捷的內(nèi)容閱讀體驗(yàn),下面我們就來(lái)看看具體實(shí)現(xiàn)方法吧2023-08-08
vue項(xiàng)目中js-cookie的使用存儲(chǔ)token操作
這篇文章主要介紹了vue項(xiàng)目中js-cookie的使用存儲(chǔ)token操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue自定義Hook實(shí)現(xiàn)簡(jiǎn)化本地存儲(chǔ)
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)使用 Vue 3 的 Composition API 創(chuàng)建一個(gè)強(qiáng)大而靈活的自定義 Hook,簡(jiǎn)化了在 localStorage 或 sessionStorage 中管理數(shù)據(jù)的流程,需要的可以參考下2023-12-12
這篇文章主要介紹了Vue3框架使用報(bào)錯(cuò)以及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
使用vscode格式化文檔無(wú)效的解決辦法(vue代碼格式化文檔無(wú)效)
這篇文章主要給大家介紹了關(guān)于使用vscode格式化文檔無(wú)效的解決辦法,也就是vue代碼格式化文檔無(wú)效,這是最近突然遇到的一個(gè)問(wèn)題,這里給大家介紹一下解決的辦法,需要的朋友可以參考下2023-08-08
Vue腳手架學(xué)習(xí)之項(xiàng)目創(chuàng)建方式
這篇文章主要給大家介紹了關(guān)于Vue腳手架學(xué)習(xí)之項(xiàng)目創(chuàng)建方式的相關(guān)資料，文中通過(guò)介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03