解決vue表單為空也能提交的問題

更新時間：2022年06月01日 10:57:54 作者：ShiyuTim

這篇文章主要介紹了解決vue表單為空也能提交的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue表單為空也能提交

今天在用Vue寫表單驗證的時候，習(xí)慣性把v-model綁定的值設(shè)置為null，然后再測試的時候，發(fā)現(xiàn)如果填寫了表單后，又刪除輸入的內(nèi)容，竟然能提交上去，百思不得其解。

最后通過vue devtools這個工具找到了問題所在。

大概是這樣寫的

<input v-model="ipt" ?/>
data () {
????return {
????????ipt: null,
????}
}
if(this.ipt !== null) {
?? ?axios.post()...
}

研究了老半天，最后通過vue工具發(fā)現(xiàn)最初設(shè)置ipt的值為null，當(dāng)表單輸入內(nèi)容，又刪除之后，雖然內(nèi)容不見了，但是ipt的值變?yōu)榱?#39;'，這樣就不能通過簡單的!== nulll來判斷了。

if(this.ipt !== null && ?this.ipt) {
?? ?axios.post()...
}

vue的表單提交方式

每次做項目都會用，也會踩一些坑，這里統(tǒng)一整理一下，當(dāng)個模板用

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="請輸入用戶名">
                </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">學(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>

上述代碼有三點需要說明

在<form>標(biāo)簽中出現(xiàn)了:model="form"，這是為了將form中的各項數(shù)據(jù)動態(tài)收集到vue的data中的form對象中，方便統(tǒng)一管理
form標(biāo)簽上的@submit.prevent為提交時阻止表單的默認(rèn)行為（跳轉(zhuǎn)）
v-model.trim是將輸入的數(shù)據(jù)去除前后的空格；v-model.number是轉(zhuǎn)換為Number類型；v-model.lazy是失去焦點后再把數(shù)據(jù)渲染到頁面上

預(yù)覽