element-ui 表单校验的 prop 属性

我们通常认为，prop 属性是我们需要进行表单校验的时候使用的。但是当我们进行一些比较复杂的校验的时候，对 prop 的理解太浅就会使我们感到头疼：prop 属性究竟做了些什么？

官网的解释有些拗口，用人话来说就是：prop 属性让你的校验规则和数据匹配。

<el-form :model="ruleForm" :rules="rules">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
        }
      };
    }
  }
</script>

以上的一个简单的例子可以告诉我们：prop 属性绑定了字段名 name，在表单验证时，就会找到其内部的表单组件绑定的变量 ruleForm.name 的值是否符合 rules 中与 name 对应的验证规则

所以，在进行简单的校验时，把 prop 的属性值设置为需要校验的字段名即可。