el form表單驗證

如果table在form中，且需要對每個**進行驗證的話，需要對prop進行處理

el-form上，model繫結的資料是json物件格式

el-form-item上，prop繫結的值必須可以通過.的方式從el-form上的model繫結的物件中找到(即prop值和el-form-item中model的名字一致)

例如設定某動態表單

:prop="

'list.'+ index + '.tobaccotypeid'
" :rules
="rules.tobaccotypeid"
>
v-model
="detail.tobaccotypeid"
placeholder
="請選擇"
filterable
style
="width
:240px
"              @change
="gettobaccoremainweight"
>
v-for
="item in brandlist"
:key
="item.tobacco_type_id"
:label
="item.tobacco_type_name+'(剩餘量:'+item.not_used_weight+'kg)'
"                :value
="item.tobacco_type_id"
>
el-option
>
el-select
>
el-form-item
>

ref=

"dataform"
:model
="blendingorder"
size
="mini"
label-position
="right"
label-width
="90px"
style
="margin-left
:50px;
"    >
label
="殘損菸絲："
prop
="fragmentlist"
>
>
:span
="12"
>
>
牌號p>
el-col
>
:span
="6"
>
>
重量(kg)p
>
el-col
>
:span
="6"
>
type
="primary"
icon
="el-icon-plus"
size
="mini"
@click
="addfragmentdetail"
>
新增el-button
>
el-col
>
el-row
>
v-for
="(detail,index) in blendingorder.list"
:key
="index"
>
:key
="index"
>
:span
="12"
>
:prop="
'list.'+ index + '.tobaccotypeid'
" :rules
="rules.tobaccotypeid"
>
v-model
="detail.tobaccotypeid"
placeholder
="請選擇"
filterable
style
="width
:240px
"                  @change
="gettobaccoremainweight"
>
v-for
="item in brandlist"
:key
="item.tobacco_type_id"
:label
="item.tobacco_type_name+'(剩餘量:'+item.not_used_weight+'kg)'
"                    :value
="item.tobacco_type_id"
>
el-option
>
el-select
>
el-form-item
>
el-col
>
:span
="6"
>
:prop="
'list.'+ index + '.weight'
" :rules
="rules.weight"
>
v-model
="detail.weight"
placeholder
="請輸入摻配重量"
style
="width
:80%
" />
el-form-item
>
el-col
>
:span
="6"
>
>
v-show
="showdelete"
size
="mini"
type
="danger"
icon
="el-icon-delete"
@click
="delfragmentdetaillist"
>
刪除el-button
>
el-form-item
>
el-col
>
el-row
>
div>
el-form-item
>
data()

// 包含小數的數字驗證

weight:

[settimeout((

)=>

else

else

if(value <0)

else}}

,1000);

},trigger:

["blur"

,"submit"]}

]}}頁面圖

el form單個表單域新增自定義驗證

直接把validator寫在data中會報undefined，我們需要把它改造一下，寫在methods中 下面貼 style width 20px height 20px margin 4px 將validator寫在methods中 methods callback imagevalidator ...

el form多層動態表單驗證問題解決

原 結構如下 addobject ref objectform rules add object rules 目標名稱 prop object name el form item 週期範圍 prop objyear el form item 負責單位 prop group ids el form i...

el form登入表單在Safari瀏覽遇到的問題

最近遇到乙個非常奇怪的問題，登入表單在輸入密碼之後，密碼框失去焦點後獲取資料，在這之前禁用登入按鈕。還有乙個重置按鈕，用來重置表單。使用瀏覽器的記住密碼功能填充表單，在chrome，firefox瀏覽器執行的好好的，但是到safari瀏覽器就出現了問題，正常輸入使用者名稱密碼可以登入，但使用瀏覽器記...