[Element]Form表单验证

校验表单

在ElementUI中的Form组件中，支持自定义规则表单校验。

使用方式

定义一个表单组件。

<el-form :model="form" label-width="90px" :rules="rules" ref="rulesForm">
    <el-form-item label="品牌名称" required prop="name">
        <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
</el-form>

我们只需要为 el-form 组件,添加上一个 rules 自定义属性, 和 ref 属性。
 - rules的值需要定义在data中，它是一个对象，对象中的每个属性，是为 el-form-item 元素绑定的prop值。
 - 该prop值一定是 el-form 元素中 model 绑定对象的属性[key]。

data(){
    return {
        rules: {
            // 需要验证的字段
            name: [
                // 验证规则,可以在数组中写多条规则
                {required: true, message: '该选项是必填项!', trigger: 'blur'},
                {min: 2, max: 10, message: '长度在2-10之间!', trigger: 'blur'}
            ]
        }
    }
}

在发送表单数据之前，应该先去表单中的内容是否满足表单校验规则。
 - 我们应该在点击事件中，使用 如下方法。


$refs中的formName属性是为 el-form 表单绑定的 ref 属性。
 - 如果不为该函数传递参数[函数]，那么返回的是一个Promise。
 - valid：如果满足验证规则，则为true，否则为false。

this.$refs[formName].validate((valid) => {
    if (valid) {
        alert("submit!");
    } else {
        console.log("error submit!!");
        return false;
    }
});