先吐槽一下，個人感覺element-ui提供的文件寫的太少，用的時候會踩很多坑。

如：表單驗證方法 傳入的value沒有值  等。

下面，是我對element-ui  form表單驗證使用的總結，應該能解決大部分問題，或者，也可以直接拿過去修改使用。

（本文程式碼使用的是 vue.js + element-ui）

要寫人名、年齡資訊的表單校驗（人的數量使用者可自己增減）

1. el-form 上，model繫結的資料必須是json物件格式

（不一定說“必須”，只有是json物件格式的時候，element-ui提供的校驗方法功能才完全可用）

2. el-form-item 上，prop繫結的值必須可以通過  .  的方式從el-form上的model繫結的物件中找到。

例： input繫結的是name，el-form上的model繫結的是formData，他們的關係是formData.list[0].name

        所以，prop繫結的值應該是字串：list[0].name

        只有這樣寫，校驗方法rule_name傳入的value才是輸入框中的值。

 3.  提交按鈕要寫在el-form-item中，提交方法要用element-ui提供的方法，這樣，element-ui會在提交前進行表單校驗

下面是程式碼

<style scoped>
.align{
    display: flex;
    align-items: center;
}
.alignT{
    display: flex;
    align-items: flex-start;
}
.iconBtn{
    color: #409EFF;
    font-size: 26px;
    cursor: pointer;
}
</style>

<template>
    <div>
        <el-form :model="formData" ref="formData" status-icon style="width:100%;">
            <!-- 引數輸入 -->
            <el-row>資訊輸入：</el-row>
            <el-row :gutter="30">
                <el-col :span="20">
                    <el-row 
                        :gutter="20" 
                        v-for="(item,index) in formData.list"
                        :key="index"
                        class="alignT spaceTop1">
                        <el-col :span=".5">
                            <i class="iconBtn" @click="listMethod(index)" :class="{'el-icon-circle-plus-outline': index == 0,'el-icon-remove-outline': index>0}" style="margin-top:6px;"></i>
                        </el-col>
                            <el-col :span="10">
                                <el-form-item :prop="'list[' + index + '].name'" :rules="{validator: rule_name,trigger: 'blur'}">
                                    <el-input placeholder="請輸入名稱" v-model="item.name" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item  :prop="'list[' + index + '].age'"  :rules="{validator: rule_age,trigger: 'blur'}">
                                    <el-input placeholder="請輸入年齡" v-model="item.age" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                    </el-row>
                </el-col>
            </el-row>

            <!-- 按鈕 -->
            <el-row>
                <el-col :span=".5">
                    <el-form-item>
                        <el-button type="primary" @click="submit('formData')">提交</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: 'elementForm',            /* element-ui表單驗證 */
        data() {
            return {
                formData: {
                    list: [{name: '',age: ''}]
                }
            };
        },
        mounted() {
        },
        methods: {
            // 表單增減操作
            listMethod(n) {
                if (n > 0) {
                    this.formData.list.splice(n,1);
                }else{
                    let o = {name: '',age: ''};
                    this.formData.list.push(o);
                };
            },
            // 姓名校驗方法
            rule_name(rule,value,callback) {
                console.log(value);
                // 姓名不能為空
                if (!value) {
                    return callback(new Error('請輸入姓名'));
                };
                callback();
            },
            // 年齡校驗方法
            rule_age(rule,value,callback) {
                if (!value) {
                    return callback(new Error('請輸入年齡'));
                };

                let n = Number(value);

                if (n < 1) {
                    return callback(new Error('年齡不能小於1歲'));
                };

                if (n > 200) {
                    return callback(new Error('年齡不能大於200歲'));
                };

                callback();
            },
            // 提交
            submit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid) {
                        // 驗證不通過禁止提交
                        console.log('驗證不通過');
                        return false;
                    };

                    console.log('驗證通過');
                });
            }
        }
    };
</script>