表單的部分目前只有針對不能為空白做驗證,這部分需要做到最佳化就要調整一下,在ElementUI-Form-Validation中使用rules做驗證規則
在src/views/modules/product/brand-add-or-update.vue中要針對排序和首字母做其他驗證規則,先對排序的部分輸入需為數字,在v-model中使用number表示輸入為數字
<el-form-item label="排序" prop="sort">
<el-input v-model.number="dataForm.sort" placeholder="排序"></el-input>
</el-form-item>
並且在這一部分的dataRule中針對特定的欄位寫驗證規則

firstLetter: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("搜尋首字母不能為空白"));
} else if (!/^[a-zA-Z]$/.test(value)) {
callback(new Error("搜尋首字母必須是單個英文字母"));
} else {
callback();
}
},
required: true,
trigger: "blur",
},
],
sort: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("排序不能為空白"));
} else if (!Number.isInteger(value) || value < 0) {
callback(new Error("排序數字必須大於等於0"));
} else {
callback();
}
},
required: true,
trigger: "blur",
},
],
驗證規則中,標示為空白驗證的時候需要使用嚴格比較(value === “")否則當輸入0的時候依然會判斷為空白

這樣就將驗證規則完成了