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>