這個(gè)題目可能表達(dá)不明白，就是表達(dá)內(nèi)的數(shù)據(jù)都填寫了通過rules驗(yàn)證發(fā)現(xiàn)表單內(nèi)根本沒有數(shù)據(jù)，表單是空的。
這是表單 類型是insertBook，填寫基本的圖書信息
<el-form
:rules="rules"
ref="insertBook"
:model="insertBook"
label-width="80px"
>
<el-row>
<el-col :span="7"
><el-form-item label="書名" prop="bname">
<el-input
v-model="insertBook.books.bname"
style="width: 240px"
></el-input> </el-form-item
></el-col>
<el-col :span="7">
<el-form-item label="書號(hào)" prop="bnum">
<el-input
v-model="insertBook.books.bnum"
style="width: 240px"
></el-input> </el-form-item
></el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item label="作者" prop="bwriter">
<el-input
v-model="insertBook.books.bwriter"
style="width: 240px"
></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="出版社" porp="bpress">
<el-input
v-model="insertBook.books.bpress"
style="width: 240px"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item label="分類" prop="bclass">
<el-select
v-model="insertBook.books.bclass"
placeholder="請(qǐng)選擇分類"
>
<el-option
v-for="e in $store.state.booksClass"
:key="e.index"
:label="e.text"
:value="e.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="狀態(tài)" prop="bstate">
<el-select
v-model="insertBook.books.bstate"
placeholder="請(qǐng)選擇狀態(tài)"
>
<el-option
v-for="e in $store.state.booksState"
:key="e.index"
:label="e.text"
:value="e.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item label="價(jià)格" prop="bprice">
<el-input
v-model.number="insertBook.books.bprice"
style="width: 240px"
></el-input>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="樓層" prop="bfloor">
<el-input
v-model.number="insertBook.books.bfloor"
style="width: 50px"
></el-input>
</el-form-item>
</el-col>
<el-col :span="1"></el-col>
<el-col :span="3">
<el-form-item label="位置" prop="baddress">
<el-input
v-model="insertBook.books.baddress"
style="width: 50px"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item label="來源" prop="bsource">
<el-input
v-model="insertBook.booksNote.bsource"
style="width: 240px"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary" @click="insertBooks()">入庫</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
這是寫在data中的insertBook類型數(shù)據(jù) 以及rules驗(yàn)證規(guī)則
data() {
return {
sampleD: "value",
insertBook: {
books: {
baddress: null,
bclass: "xiandai",
bfloor: null,
bid: null,
bname: null,
bnum: null,
bpress: null,
bprice: null,
bstate: "keyi",
bwriter: null,
},
booksNote: {
bid: 5,
bnum: "",
bsource: null,
insertTime: "",
insertAdmin: "",
},
},
rules: {
bname: [{ required: true, message: "請(qǐng)?zhí)顚憰?, trigger: "blur" }],
bwriter: [{ required: true, message: "請(qǐng)?zhí)顚懽髡?, trigger: "blur" }],
bpress: [{ required: true, message: "請(qǐng)?zhí)顚懗霭嫔?, trigger: "blur" }],
bfloor: [
{ required: true, message: "請(qǐng)?zhí)顚懘娣艠菍?, trigger: "blur" },
{ validator: isInteger, trigger: "blur" },
],
baddress: [
{ required: true, message: "請(qǐng)?zhí)顚懘娣艜?, trigger: "blur" },
],
bnum: [{ required: true, message: "請(qǐng)?zhí)顚憰?hào)", trigger: "blur" }],
bprice: [{ required: true, message: "請(qǐng)?zhí)顚憙r(jià)格", trigger: "blur" }],
bsource: [{ required: true, message: "請(qǐng)?zhí)顚憗碓?, trigger: "blur" }],
bstate: [{ required: true, message: "請(qǐng)選擇書籍狀態(tài)", trigger: "blur" }],
bclass: [{ required: true, message: "請(qǐng)選擇書籍分類", trigger: "blur" }],
},
};
},
這是method中的插入書籍請(qǐng)求
insertBooks() {
this.$refs.insertBook.validate((valid) => {
if (valid) {
this.$http({
method: "post",
url: "/library/books/insertBook",
data: this.insertBook,
}).then(
(res) => {
this.$message.warning(JSON.stringify(res.data));
},
(error) => {
console.log(" request error : " + error.response.status);
}
);
} else {
this.$message.warning(this.insertBook);
// this.$message.warning("驗(yàn)證不通過請(qǐng)重新填寫表單");
}
});
},
我仔細(xì)地檢查了每一個(gè)標(biāo)簽 并沒有落下任何一個(gè)prop
然而
我填寫了數(shù)據(jù)vue中也提示有數(shù)據(jù)，我通過請(qǐng)求中的else this.$message.warning(this.insertBook);
發(fā)現(xiàn)輸出insertBook中的數(shù)據(jù)，輸出為空文章來源：http://www.zghlxwxcb.cn/news/detail-424678.html
解決了 臥槽 真厲害呀
就是我的書名類型全稱應(yīng)該是insertBook.books.bname （就是v-model）
要寫成 prop=‘books.bname’
rule:{
[‘books.bname’]:[{ required: true, message: “請(qǐng)?zhí)顚憰? trigger: “blur” }]
}
這樣就好使了 hhhh文章來源地址http://www.zghlxwxcb.cn/news/detail-424678.html
| 解決了rules驗(yàn)證失敗，類型只能扒掉一層皮 | |
|---|---|
到了這里，關(guān)于Vue rules表單驗(yàn)證失效的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
