vue element 動態表單驗證

公司最近的專案有個新增動態表單的需求，總結一下我在表單驗證上遇到的一些坑。

如圖是功能的需求，這個功能挺好實現的，但是表單驗證真是耗費了我一些功夫。

vue+element在表單驗證上有一些限制，必須依照element示例的格式才能驗證通過。

附上**：

1

<
el-form 
:model="dynamicvalidateform" ref="dynamicvalidateform"label-width
="100px"
class
="demo-dynamic"
> 
2<
div 
v-for
="(domain, index) indynamicvalidateform.list"
>
3<
el-form-item 
label
=""style
="margin-left: -70px"
>
4<
el-select 
v-model
="dynamicvalidateform.list[index].organizer.positionid"
@change
="positon($event)"
>
5<
el-option
6v-for
="item in positionlist"
7:key
="item.id"
8:label
="item.name"
9:value
="item.id"
10:disabled
="item.disabled"
11>
el-option
>
12el-select
>
13el-form-item
>
14<
el-form-item 
style
="margin-left: -29px"
15label
="人數"
16:prop="'list.' + index + '.organizer.number'"
17 :rules="">
18<
el-input 
v-model
="domain.organizer.number"
placeholder
="人數"
>
el-input
>
19el-form-item
>
20<
el-form-item 
label
="直屬下級"
v-if
="dynamicvalidateform.list[index].organizer.positionid!==1"
>
21<
el-select 
v-model
="dynamicvalidateform.list[index].organizer.parentid"
>
22<
el-option
23v-for
="item in positionlist"
24:key
="item.id"
25:label
="item.name"
26:value
="item.id"
27>
el-option
>
28el-select
>
29el-form-item
>
30<
span 
style
="margin-left: 30px"
>任務
span
>
31<
span 
v-for
="(itm,i) in dynamicvalidateform.list[index].dutyid"
:key
="i"
>
32<
el-form-item 
label
=""style
="width: 100px;"
id="ren"
33:prop="'list.' + index + '.dutyid.'+i+'.dutyid'"
34 :rules=""
35>
36<
el-select 
v-model
="dynamicvalidateform.list[index].dutyid[i].dutyid"
>
37<
el-option
38v-for
="item in dutylist"
39:key
="item.id"
40:label
="item.name"
41:value
="item.id"
42>
el-option
>
43el-select
>
44el-form-item
>
45span
>
46<
span 
class
="add"
@click
="addwork(index)"
>增加任務+
span
>
47div
>
48<
p class
="addlevel"
@click
="addlevel()"
>＋增加職位
p>
49el-form
>

:prop和:rulues還有v-model裡面的字段必須是一一對應的，不然會一直驗證不通過，這是驗證最關鍵的

我害怕驗證不通過，選擇在行內驗證

1

dynamicvalidateform:,
9dutyid:[
1013]14
}15],16 },

1

bus: [2,
3 //這種驗證必須是內容必須是字串才能通過，不然一直會提示50個字元以內
4 ],
//如果必須填寫數字，可以這樣改

bus: [

,

$/, message: '50個字元以內', trigger: 'blur'}  //正則轉換成數字

],

vue element表單驗證

簡單的輸入為空和輸入3 5個字元驗證 使用之後的隨筆 template部分 ruleform rules rules ref ruleform label width 100px class demo ruleform 姓名 prop name ruleform.name el input el f...

vue element 動態增加表單並進行表單驗證

表單驗證 需要注意的一點是 普通表單驗證單項依靠的是prop 而動態生成的表單要用 prop 書寫的語法是 prop morenotifyobject.index notifyobject morenotifyobject是v for繫結的陣列，index是索引，notifyobject是表單繫結的...

vue Element表單預驗證

表單完整 登陸表單 model form rules login rules ref form label width 0px class login form 使用者名稱 username v model form.username placeholder 請輸入賬號 prefix icon el...