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 的屬性值設定為需要校驗的字段名即可。