el-form 中的表单验证

<el-form :model="ruleForm" :rule="rules" ref="ruleForm">
    <el-form-item label="活动名称" prop="name">
    	<el-input v-model="ruleForm.name" />
    </el-form-item>
</el-form>
<script>
export default {
    data() {
        return {
            ruleForm: {
                name: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }, // 注意，想要失去焦点即触发，则必须要`required: true`，因为这样就好像给了它一个前提条件
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    // 这个就不需要`required: true`了，min 和 max 就是一个条件
                ]
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                // ...
            })
        }
    }
}
</script>

解析

属性解析

• prop

  表单域的 model 字段，在使用 validate，resetFields 方法的情况下，该字段为必填字段