el-form 表单验证出现xxx is required

我在实践中遇到了这个问题，目前百度只有这一个答案：https://segmentfault.com/q/1010000023133572

实践之后我发现除了用setTimeout、nextTick这两个方法以外，还有两个方法

• 方法一：不用required属性。通过添加is-required类名来添加必选的那个红色图标。因为element就是通过is-required这个类把图标显示出来的
• 方法二：required属性不要用在form-item里，用在具体规则里

方法一源码：

<template>
    <el-form ref="supply" :model="supply" :rules="rules" label-width="157px">
        <!--    增加is-required类 -->
        <el-form-item label="联系人手机：" class="is-required" prop="phone">
            <el-input v-model="supply.phone"></el-input>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "FormRequire",
        data() {
            let checkPhoneNum = (rule, value, callback) => {
                let patter = new RegExp(/^1\s*[3456789]\s*(\d\s*){9}$/);
                if (value === "") {
                    return callback(new Error('不能为空'));
                } else if (!patter.test(value)) {
                    return callback(new Error('手机号码格式不正确'));
                } else {
                    callback();
                }
            };
            return {
                supply: {
                    phone: ''
                },
                rules: {
                    phone: [
                        {validator: checkPhoneNum, trigger: 'blur'}
                    ]
                }
            }
        },
        watch: {
            supply: {
                handler(newValue) {
                    if (!newValue.phone.length) {
                        this.$refs['supply'].clearValidate('phone');
                    }
                },
                deep: true
            }
        }
    }
</script>

方法二源码：

<template>
    <el-form ref="supply" :model="supply" :rules="rules" label-width="157px">
        <!--   删除:required -->
        <el-form-item label="联系人手机：" prop="phone">
            <el-input v-model="supply.phone"></el-input>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "FormRequire",
        data() {
            let checkPhoneNum = (rule, value, callback) => {
                let patter = new RegExp(/^1\s*[3456789]\s*(\d\s*){9}$/);
                if (value === "") {
                    return callback(new Error('不能为空'));
                } else if (!patter.test(value)) {
                    return callback(new Error('手机号码格式不正确'));
                } else {
                    callback();
                }
            };
            return {
                supply: {
                    phone: ''
                },
                rules: {
                    phone: [
                        // required属性放到这里
                        {required: true, validator: checkPhoneNum, trigger: 'blur'}
                    ]
                }
            }
        },
        watch: {
            supply: {
                handler(newValue) {
                    if (!newValue.phone.length) {
                        this.$refs['supply'].clearValidate('phone');
                    }
                },
                deep: true
            }
        }
    }
</script>