鍍金池/ 問答/HTML/ element-ui 無法對綁定表單的對象中的對象屬性進(jìn)行驗(yàn)證

element-ui 無法對綁定表單的對象中的對象屬性進(jìn)行驗(yàn)證

在element-ui中,如果表單綁定了一個對象,這個對象包含多個對象,例如:

formData: { 
    "applymember": {
        "name": "12", 
        "professionalname": "", 
        "gender": "", "birth": "", 
        "email": "", 
        "phone": "" 
     }
     ...
 }

el-form中綁定這個對象:

<el-form label-position="left" label-width="80px" :model="formData">
        <personal-info class="card-style"
                       :form-data.sync="formData"/>
        ...
</el-form>

然后在element-form-item中的prop綁定這個對象的屬性,例如:

<el-form-item label="電子郵箱"
                  :prop="formData.applymember.email"
                  :rules="[
                    { required: true, message: '請輸入郵箱地址' },
                    { type: 'email', message: '請輸入正確的郵箱地址' }
                  ]"
                  v-if="formData.applymember && formData.applymember.email !== undefined">
  <el-input v-model="formData.applymember.email"
            prefix-icon="el-icon-message"/>
</el-form-item>

這個rules里的規(guī)則是無效的,在這個input中的任何輸入都會通過。

我通過查閱資料得知如果rules規(guī)則要生效必須要在prop中綁定對應(yīng)的屬性,這個屬性是表單綁定的對象的屬性,如果prop需要綁定的屬性是對象中的對象中的屬性,rules似乎就失效了。
所以prop應(yīng)該如何寫,或者別的方法能在不修改表單綁定對象的情況下讓rules中的規(guī)則生效?

回答
編輯回答
心癌

為什么要混在一起,建議使用vuex存儲狀態(tài),父子組件,完成各自的業(yè)務(wù)邏輯。這樣比較清晰。

2017年7月4日 13:06
編輯回答
葬憶

看了一下應(yīng)該是二級對象照成的 我之前也遇到過 查閱源碼得知
`<el-form-item label="月租金:"prop="housingInfoBean.rentalPrice">

    <el-input v-model.trim="form.housingInfoBean.rentalPrice"></el-input>&nbsp;元/月

</el-form-item>` 綁定的時候這么綁定 data里面聲明就是二級對象方式
rules 綁定的時候是這樣"housingInfoBean.rentalPrice":[{ required: true, message: '請輸入姓名', trigger: 'blur' },], 這個地方一定是字符串 才有效

2017年7月25日 14:08