el-form的model、prop屬性和表單校驗等詳解

el-form的model、prop屬性和表單校驗等詳解

vue綜合基礎知識
專欄收錄該內容
15 篇文章1 訂閱
訂閱專欄
Vue 的 el-form 提供了表單校驗功能， :rules 屬性設置校驗規則，並通過 el-form-item 的 prop 屬性綁定校驗規則。組件封裝，讓前端校驗更方便。

具體使用過程中，有幾個容易出錯的地方，本文來整理一下。每一個坑都是筆者親自趟過的，寫完本文后，以后應該不會再踏入相同的坑。

el-form 的 model 屬性
el-form 的 model 屬性是用來指定表單使用的數據的，雖然 el-form 指定了 model 對象，但是，理論上，vue 並沒有限制 el-input 綁定的數據，el-form 內部的 el-input 組件依然可以綁定其他數據。

需要注意的是，如果要用 rules 進行表單校驗，那么 el-input 綁定的元素必須是 el-form 的 model 的直接屬性，否則會導致校驗失敗。

<el-form :model="groupData" :rules="rules" ref="groupForm">
    <el-form-item label="分組名稱：" prop="name">
      <el-input v-model="groupData.name"/>
    </el-form-item>
</el-form>
1
2
3
4
5
這段代碼中 el-form 的 model 是 groupData，那么 el-form-item 中所有需要校驗的表單的 的 model 也必須是 groupData.xxx ，即 groupData 對象的直接屬性。

el-from-item 的 prop 屬性
el-from-item 的 prop 屬性必須與 el-input 中需要校驗的表單屬性一致。

<el-form-item label="策略名稱" prop="strategyName">
            <el-input v-model="data.strategyName" />
</el-form-item>
1
2
3
要校驗的表單 model 是 data.strategyName，那么 prop 的值也必須是 strategyName，否則無法正確完成校驗，出現明明已經已經輸入了表單值，但是還是出現校驗失敗的提示信息。

多表單校驗
el-form-item 內部如果包含多個表單，默認校驗失敗時會將所有表單高亮，例如：

雖然只有第二個表單沒有輸入，但是校驗失敗時會同時高亮兩個表單。怎么只對第二個表單高亮呢？

解決辦法是用嵌套：
外層 el-form-item 是正常的信息，內層對第二個表單再次嵌套 el-form-item 指定校驗屬性：

<el-form-item label="任務執行時間：" required>
    <el-select v-model="data.executeCycle">
      <el-option label="每小時" value="hour">每小時</el-option>
      <el-option label="每日" value="day">每日</el-option>
      <el-option label="每周" value="week">每周</el-option>
      <el-option label="每月" value="month">每月</el-option>
    </el-select>
    <el-form-item prop="executeTime">
      <el-date-picker v-model="data.executeTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="選擇日期時間"
              default-time="00:00:00">
      </el-date-picker>
    </el-form-item>
</el-form-item>

將日期輸入框包裹在新的 el-form-item 中，外層的 el-form-item 添加 requred 顯示前面的紅星，就可以只對該屬性校驗了，將第二個表單再嵌套后，校驗結果就正常了：


復雜屬性
<el-form-item label="執行周期 " prop="config.gapTime">
            <el-input    type="number" :min="1" v-model="data.config.gapTime">
            </el-input>
  <el-form-item>

此時，該屬性對應的 rules 定義也必須是對象：

rules: {
        config: {
          gapTime: [
            { required: true, message: '請輸入執行周期', trigger: 'blur' },
          ],
        },
      },

否則，就會出現明明已經輸入了值，但是還是提示校驗錯誤信息。

注意
表單校驗的時候，犯了幾個低級錯誤，記錄如下：

el-form 下的 el-input 使用的數據不是 el-form 的 model 數據，導致校驗失敗；
el-form 的 :rules 屬性敲錯了，忘記了冒號，導致傳遞的是個字符串；
el-form-item 的 prop 和 el-input 表單的屬性不一致導致校驗失敗。
————————————————
版權聲明：本文為CSDN博主「別來打擾我」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_44166697/article/details/112363664