首先看一下代碼

<el-form
      ref="loginForm"
      :model="loginInfo"
      :rules="loginRules"
      class="login-form"
      auto-complete="on"
      label-position="left"
    >

ref 屬性涉及Dom 元素的獲取(el-form表單對(duì)象)。

javaSrcipt 獲取Dom 元素是通過(guò)：document.querySelector（".input"）獲取dom元素節(jié)點(diǎn) 。

Vue 為簡(jiǎn)化DOM獲取方法提出了ref 屬性和$refs 對(duì)象。一般的操作流程是:ref 綁定控件，$refs 獲取控件。

Element官方文檔中寫到：

model是表單數(shù)據(jù)對(duì)象，rules是表單驗(yàn)證規(guī)則。

Form 組件提供了表單驗(yàn)證的功能，只需要通過(guò) rules 屬性傳入約定的驗(yàn)證規(guī)則，并將 Form-Item 的 prop 屬性設(shè)置為需校驗(yàn)的字段名即可。

里面的邏輯大概是，在el-form-item上寫一個(gè)prop，這個(gè)prop左手對(duì)應(yīng)著數(shù)據(jù)源（即用model.prop找到對(duì)應(yīng)的數(shù)據(jù)源），右手對(duì)應(yīng)著驗(yàn)證規(guī)則（即用rules.prop找到對(duì)應(yīng)的規(guī)則），然后進(jìn)行驗(yàn)證。

補(bǔ)充：注意點(diǎn)

1. :model的數(shù)據(jù)屬性和:rules的屬性相對(duì)應(yīng)
2. 一個(gè)el-form-item中有多個(gè)輸入框，每個(gè)輸入框都需要單獨(dú)嵌套在el-form-item中，此操作可以單獨(dú)校驗(yàn)每個(gè)輸入框
3. 日期類型的數(shù)據(jù)，校驗(yàn)要指定type:'date'
4. 選擇框的value為數(shù)值，校驗(yàn)需要指定type:'number'
5. 單選按鈕和多選按鈕為數(shù)值，校驗(yàn)需要指定type:'number'
6. 輸入框想要轉(zhuǎn)換成為數(shù)值類型，可以使用v-model.number，校驗(yàn)需要指定type:number'
7. 輸入框想要校驗(yàn)郵箱格式，只需要指定type:'email'
8. 嵌套在el-input中的el-select不能實(shí)現(xiàn)聯(lián)動(dòng)校驗(yàn)，若想實(shí)現(xiàn)聯(lián)動(dòng)校驗(yàn)，需要@change自定義調(diào)用校驗(yàn)
9. rules的簡(jiǎn)單校驗(yàn)有三個(gè)屬性：required,message,trigger,分別為：是否必填，校驗(yàn)失敗提示信息，校驗(yàn)時(shí)機(jī)
10. 如果要自定義校驗(yàn)規(guī)則，需要屬性validator:(rule,value,callback)=>{手動(dòng)校驗(yàn)代碼塊},rule參數(shù)數(shù)據(jù)很豐富，為一個(gè)Object類型的數(shù)據(jù)，有field,type,validator,required等屬性，value為:model屬性的值，callback(str)為要返回的信息
11. 單選框，多選框，日期框，選擇框的校驗(yàn)時(shí)機(jī)都應(yīng)該指定為change,符合業(yè)務(wù)場(chǎng)景
12. 動(dòng)態(tài)添加或刪除form表單的組件，需要?jiǎng)討B(tài)配置好label,prop,rule的數(shù)據(jù)，刪除按鈕需要注意代碼let index = array.indexOf(item)和array.splice(index,1)
13. 重置按鈕：this.$refs['refName'].resetFields();，清空了校驗(yàn)，表單數(shù)據(jù)也恢復(fù)初始值
14. 校驗(yàn)單個(gè)組件：this.$refs['refName'].validateField('propName');進(jìn)行了單個(gè)校驗(yàn)
15. 校驗(yàn)全部：this.$refs['refName'].validate(valid=>{});表單整體校驗(yàn)，一般提交按鈕需要觸發(fā)全部校驗(yàn)

總結(jié)

到此這篇關(guān)于ElementUI中<el-form>標(biāo)簽中ref、:model、:rules的作用淺析的文章就介紹到這了,更多相關(guān)el-form標(biāo)簽中ref、:model、:rules作用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論