element有關表單驗證

2022-07-06 13:39:10 字數 646 閱讀 5798

表單驗證的基礎是官網的api:rules   位置放置在el-form標籤當中 例如   :rules="formrules"   formrules則是放在data當中,其結構為:   最後會附上一些相關例項

formrules:,

phone:[  

$/,message: "請輸入正確的手機號",},

當然,其中的條件是多種多樣的,根據自己的專案進行修改。

其中的name與需要與標籤中的prop相同且與繫結的值也要相同,否則會報錯 例:

當然也有特殊情況,想只顯示紅星,卻不寫規則。這裡有兩個方法,僅供參考

1,class='is-required'

2,標籤中新增 required

注意:其中第一種只展示紅星,不會有驗證效果,而第二種是element官網自帶的方法,但當輸入框為空時,還是會報錯

再乙個就是當繫結的資料超過兩層的話,rules的name就需要修改,否則就不會其作用。例如

暫時就想到這麼多,以後想到再補充吧

Element表單驗證(2)

上篇講的是async validator的基本要素,那麼,如何使用到element中以及怎樣優雅地使用,就在本篇。上篇講到async validator由3大部分組成 基本驗證流程如下 上面中的validator.validate對應element中的this.refs refname valida...

element 多個表單同時驗證

做後台管理專案 最常見的就是 的驗證了 簡單的表單是很簡單的 如果涉及到 內部巢狀表單 多表單同時驗證時及其他複雜驗證時 就相對就有些棘手了 下面我們就先講一下 多表單同時驗證的情況 顯然 多表單就是乙個頁面同時使用多個表單 通常不多見 先看下使用場景吧 單獨的每個標籤模組 都是乙個form 並不是...

element表單驗證的封裝

這一篇文章是在用element中的表單的時候,會用到正則來判斷表單的對錯,當然正則的話得自己寫,比如這樣 但是我們開發的時候就會發現如果兩個元件都用到了這個正則那麼就會產生重複性,這還只是兩個,一般的話不止兩個,會有很多,會產生很多的重複的正則,那麼,就很煩,因為我們是要追求優雅,簡介的,誒,碰到我...