溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“vue表單為空也能提交的問題如何解決”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue表單為空也能提交的問題如何解決”吧！
今天在用Vue寫表單驗證的時候，習慣性把v-model綁定的值設置為null，然后再測試的時候，發現如果填寫了表單后，又刪除輸入的內容，竟然能提交上去，百思不得其解。
最后通過vue devtools這個工具找到了問題所在。
<input v-model="ipt" />
data () {
return {
ipt: null,
}
}
if(this.ipt !== null) {
axios.post()...
}研究了老半天，最后通過vue工具發現最初設置ipt的值為null，當表單輸入內容，又刪除之后，雖然內容不見了，但是ipt的值變為了''，這樣就不能通過簡單的!== nulll來判斷了。
if(this.ipt !== null && this.ipt) {
axios.post()...
}每次做項目都會用，也會踩一些坑，這里統一整理一下，當個模板用
<!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="請輸入用戶名">
</label>
</div>
<div>
<label>密碼
<input v-model="form.password" type="password" placeholder="請輸入密碼">
</label>
</div>
<div>
<label>頭像<input type="file" @change="handleChange"></label>
</div>
<div>
<label>姓名
<input v-model.trim="form.name" type="text" placeholder="請輸入您的姓名">
</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="請輸入年齡">
</label>
</div>
<div>
<label>愛好
<label>
<input v-model="form.hobby" type="checkbox" value="study">學習
</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>所屬校區
<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" cols="30" rows="10"></textarea>
</label>
</div>
<div>
<label>
<input v-model="form.accept" type="checkbox">
閱讀并接受<a href="http://www.baidu.com" rel="external nofollow" >《用戶協議》</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);
//在這里進行上傳（axios、ajax）
},
handleChange(event) {
let file = event.target.files[0]
this.form.image = file
}
},
})
</script>
</body>
</html>上述代碼有三點需要說明
在<form>標簽中出現了:model="form"，這是為了將form中的各項數據動態收集到vue的data中的form對象中，方便統一管理
form標簽上的@submit.prevent為提交時阻止表單的默認行為（跳轉）
v-model.trim是將輸入的數據去除前后的空格；v-model.number是轉換為Number類型；v-model.lazy是失去焦點后再把數據渲染到頁面上
感謝各位的閱讀，以上就是“vue表單為空也能提交的問題如何解決”的內容了，經過本文的學習后，相信大家對vue表單為空也能提交的問題如何解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
