Vue中使用Element-UI表單驗證相關問題及解決

項目中表單填寫提交前需要進行驗證,記錄一下踩坑的幾個地方

目錄

• rules驗證和自帶驗證

rules驗證和自帶驗證

在data中用rules自定義了驗證信息,注意,prop的值應該與v-model的值和rules中的值一樣,否則無法觸發rules驗證。

例子如下：

<el-form-item label="分布區間" prop="scale">
    <el-input v-model="form.scale" placeholder="請輸入分布區間"></el-input>
</el-form-item>

                rules: {
                    scale: [
                        {required: true, message: '請輸入分布區間', trigger: 'blur'}
                    ],
                }

在實際使用中,當el-form-item標簽與rules中同時擁有required屬性時(即<el-form-item label="分布區間" prop="scale" required>)

表單會先進行自帶驗證,再進行rules驗證

這個自帶驗證顯示的是async-validator驗證的內容,打開控制台即可看到

例子是這樣的：

控制台

頁面顯示

如果想只觸發rules驗證,el-form-item標簽中不可填寫required屬性

只觸發rules驗證