首先看一下代碼

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

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

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

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

Element官方文檔中寫到：

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

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

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

補充：注意點

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

總結(jié)

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

最新評論