Vue 的 el-form 提供了表單校驗功能， :rules 屬性設(shè)置校驗規(guī)則，并通過 el-form-item 的 prop 屬性綁定校驗規(guī)則。組件封裝，讓前端校驗更方便。

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

el-form 的 model 屬性

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

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

<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>

這段代碼中 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>

要校驗的表單 model 是 data.strategyName，那么 prop 的值也必須是 strategyName，否則無法正確完成校驗，出現(xiàn)明明已經(jīng)已經(jīng)輸入了表單值，但是還是出現(xiàn)校驗失敗的提示信息。

多表單校驗

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

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

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

<el-form-item label="任務(wù)執(zhí)行時間：" 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 顯示前面的紅星，就可以只對該屬性校驗了，將第二個表單再嵌套后，校驗結(jié)果就正常了：

復(fù)雜屬性

<el-form-item label="執(zhí)行周期 " prop="config.gapTime">
            <el-input    type="number" :min="1" v-model="data.config.gapTime">
            </el-input>
  <el-form-item>

此時，該屬性對應(yīng)的 rules 定義也必須是對象：

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

否則，就會出現(xiàn)明明已經(jīng)輸入了值，但是還是提示校驗錯誤信息。

注意

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

• el-form 下的 el-input 使用的數(shù)據(jù)不是 el-form 的 model 數(shù)據(jù)，導(dǎo)致校驗失敗；
• el-form 的 :rules 屬性敲錯了，忘記了冒號，導(dǎo)致傳遞的是個字符串；
• el-form-item 的 prop 和 el-input 表單的屬性不一致導(dǎo)致校驗失敗。

 到此這篇關(guān)于el-form的model、prop屬性和表單校驗等使用的文章就介紹到這了,更多相關(guān)el-form model、prop屬性和表單校驗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論