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

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

el-form 的 model 屬性

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

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

<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 中所有需要校驗(yàn)的表單的 的 model 也必須是 groupData.xxx ，即 groupData 對(duì)象的直接屬性。

el-from-item 的 prop 屬性

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

<el-form-item label="策略名稱" prop="strategyName">
            <el-input v-model="data.strategyName" />
</el-form-item>

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

多表單校驗(yàn)

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

雖然只有第二個(gè)表單沒有輸入，但是校驗(yàn)失敗時(shí)會(huì)同時(shí)高亮兩個(gè)表單。怎么只對(duì)第二個(gè)表單高亮呢？

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

<el-form-item label="任務(wù)執(zhí)行時(shí)間：" required>
    <el-select v-model="data.executeCycle">
      <el-option label="每小時(shí)" value="hour">每小時(shí)</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="選擇日期時(shí)間"
		      default-time="00:00:00">
      </el-date-picker>
    </el-form-item>
</el-form-item>

將日期輸入框包裹在新的 el-form-item 中，外層的 el-form-item 添加 requred 顯示前面的紅星，就可以只對(duì)該屬性校驗(yàn)了，將第二個(gè)表單再嵌套后，校驗(yàn)結(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>

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

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

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

注意

表單校驗(yàn)的時(shí)候，犯了幾個(gè)低級(jí)錯(cuò)誤，記錄如下：

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

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