快捷導(dǎo)航

el-form的model、prop屬性和表單校驗(yàn)等使用

更新時(shí)間：2022年08月12日 10:18:00 作者：別來(lái)打擾我

本文主要介紹了el-form的model、prop屬性和表單校驗(yàn)等使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

el-form 的 model 屬性

el-form 的 model 屬性是用來(lái)指定表單使用的數(shù)據(jù)的，雖然 el-form 指定了 model 對(duì)象，但是，理論上，vue 并沒(méi)有限制 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，否則無(wú)法正確完成校驗(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è)表單沒(méi)有輸入，但是校驗(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)失?。?/li>
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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: