vue+Element表單的校驗方式

一、單個添加校驗

　　這種方式適合校驗個別字段，或者表單字段有改變的校驗。

<template>
    <div>
        <el-form :model="model">
            <el-form-item label="姓名：" prop="name" :rules="[{required:true,message:'請輸入姓名',trigger:'blur'}]">
                <el-input v-model="model.name" placeholder="請輸入姓名" clearable></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Test",
        data() {
            return {
                model: {
                    name: "",
                }
            }
        },
    }
</script>

二、通過 rules 屬性傳入約定的驗證規則，並將 Form-Item 的 prop 屬性設置為需校驗的字段名

　　代碼如下所示：

<template>
    <div>
        <el-form :model="model" :rules="rules">
            <el-form-item label="姓名：" prop="name">
                <el-input v-model="model.name" placeholder="請輸入姓名" clearable></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Test",
        data() {
            return {
                model: {
                    name: "",
                },
                rules: {
                    name: [{required: true, message: '請輸入姓名', trigger: 'blur'}]
                }
            }
        },
    }
</script>

三、動態表單校驗

　　動態表單校驗，需要在單個的表單域上傳遞屬性的驗證，示例代碼如下所示：

<template>
    <div>
        <el-form :model="model">
            <el-form-item
                    v-for="(item, index) in model.name"
                    :label="'名字' + index"
                    :key="item.key"
                    :prop="'name.' + index + '.value'"
                    :rules="{required: true, message: '請輸入姓名', trigger: 'blur'}"
            >
                <el-input v-model="item.value"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Test",
        data() {
            return {
                model: {
                    name: [{value: ""}, {value: ""}],
                }
            }
        },
    }
</script>

　　效果如下圖所示：

四、多個表單的校驗

 　　校驗多個表單的思路是：所有單個表單的校驗結果返回一個promise，將所有的promise放入一個數組，使用promise.all進行校驗。

 　　代碼如下所示：

<template>
    <div>
        <el-form :model="model1" ref="form1">
            <el-form-item label="姓名：" prop="name" :rules="[{required:true,message:'請輸入姓名',trigger:'blur'}]">
                <el-input v-model="model1.name" placeholder="請輸入姓名" clearable></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="model2" ref="form2">
            <el-form-item label="性別：" prop="gender" :rules="[{required:true,message:'請輸入性別',trigger:'blur'}]">
                <el-input v-model="model2.gender" placeholder="請輸入性別" clearable></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="model3" ref="form3">
            <el-form-item label="年齡：" prop="age" :rules="[{required:true,message:'請輸入年齡',trigger:'blur'}]">
                <el-input v-model="model3.age" placeholder="請輸入年齡" clearable></el-input>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="submit">點擊校驗</el-button>
    </div>
</template>

<script>
    export default {
        name: "Test",
        data() {
            return {
                model1: {
                    name: "",
                },
                model2: {
                    gender: "",
                },
                model3: {
                    age: "",
                }
            }
        },
        methods: {
            submit() { let list = []; list.push( this.checkForm("form1"), this.checkForm("form2"), this.checkForm("form3")); Promise.all(list) .then(() => { console.log("通過檢測"); }) .catch(() => { console.log("未通過"); }); }, //檢查表單是否校驗通過，返回Promise
 checkForm(formName) { return new Promise((resolve, reject) => { this.$refs[formName].validate(valid => { if (valid) { resolve(); } else reject(); }); }); }
        }
    }
</script>