使用element ui動態表單做表單驗證

2021-10-16 15:26:33 字數 723 閱讀 3169

官方給的demo

// 表單

v-for=

"(domain, index) in dynamicvalidateform.domains"

:label=

"'網域名稱' + index"

:key=

"domain.key"

:prop=

"'domains.' + index + '.value'"

:rules=""

>

"domain.value"

>

<

/el-input>

"removedomain(domain)"

>刪除<

/el-button>

<

/el-form-item>

// 表單資料

dynamicvalidateform:

]}

有兩個引數需要注意

1.prop的值格式必須是』迴圈的陣列.』 + 下標 + 『.陣列中對應的值』,其中『.』也是必須要的,不按格式寫會報錯,導致驗證失敗。如上**所示dynamicvalidateform表單中的domains是要迴圈的陣列,index是下標,value是陣列的值。

2.rules必須單獨繫結驗證規則,直接使用form元件上的rules是不起作用的

ElementUI動態增減表單項

增加新選項 增加新選項 const option export default rules answers options methods 將keys歸位 for let i 0 i this.formdata.optionslist.length i 將答案歸位 單選 this.formdata....

element UI 表單的使用

這裡就不貼 了,官網也差不多都有,就簡述一下這次所用所涉及的引數。1.在 form 元件中,每乙個表單域由乙個 form item 元件構成,表單域中可以放置各種型別的表單控制項,包括 input select checkbox radio switch datepicker timepicker。...

element ui表單驗證

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