element ui表單驗證資料繫結踩坑點

2021-09-29 18:38:49 字數 724 閱讀 3308

基礎用法很簡單:

資料複雜後需要注意資料繫結不能出錯,尤其是動態繫結,要注意一下幾點:

動態繫結時的 prop

此時繫結 prop 不能只寫欄位名,還要加上對應的陣列索引,需要驗證的資料套了幾層都要寫出來,除了 el-form 繫結的那一層,例如:

tbdata 的資料結構:

需要驗證的是 tbdata 物件下每乙個的 tbheader 陣列下的 value 字段,除了 el-form 繫結的 tbdata,prop繫結是:

:prop="'tbheader.' + ind + '.value'"
動態繫結時的 rule

動態繫結時除了 prop 外還要繫結 rule,而且要寫清楚規則陣列,即使 el-form 中繫結過 :rules 的值。

element ui表單驗證

可以在pattern中書寫正則,並且配合elementui進行表單驗證。pattern 屬性規定用於驗證輸入欄位的模式。模式指的是正規表示式。rules message 以字母開頭,長度在2 5之間,只能包含字元 數字和下劃線 password message 只能輸入6 20個字母 數字 下劃線 ...

elementUI表單驗證

elementui表單驗證非常方便,我們直奔主題 1 驗證表單中的某個字段 驗證contact欄位 this.refs.orderform.validatefield contact 驗證phone欄位 this.refs.orderform.validatefield phone 2 驗證整個表單...

element ui表單驗證 正則驗證

數字型別的驗證需要在 v model 處加上 number 的修飾符,這是 vue 自身提供的用於將繫結值轉化為 number 型別的修飾符。export default methods at position 209 resetfo refs formname resetfields const ...