在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ element ui 表單驗證（data數(shù)據(jù)多重結(jié)構(gòu)時驗證不成功問題）

element ui 表單驗證（data數(shù)據(jù)多重結(jié)構(gòu)時驗證不成功問題）

我的data數(shù)據(jù)是多重結(jié)構(gòu)的，如下

 var formParamters= {
    Header:
        {
            SCHEDULE_HEADER_ID: 0,
            COMPANY_NAME: '13',
        },
    Details: [
        {
            AREA_1: null,
            SCHEDULE_DATE_1:null,
        }
    ]
};

HTML寫的時候，v-model綁定 Header下面的 COMPANY_NAME

<el-form v-bind:model="formParamters" ref="addForm" :rules="rules" label-width="100px" >
<el-form-item  label="公司名" prop="COMPANY_NAME" >
<el-input v-model="formParamters.Header.COMPANY_NAME"  ></el-input>
</el-form-item>

rules規(guī)則

rules: {COMPANY_NAME: [{ required: true, message: '公司名稱', trigger: 'blur' }] }

在submit時

submitForm: function (formName) {
    this.$refs.addForm.validate(function (valid) {
        if (valid) {
            console.log('validate sucess');
        } else {
            console.log('validate fail');
            return false;
        }
    });
}

這個時候就算是COMPANY_NAME有值也是驗證不成功的 ，我有輸出console.log(this.$refs.addForm); 估計應(yīng)該是prop跟v-model對不上的原因

如果我在formParamters加上 COMPANY_NAME1

<el-form-item  label="公司名" prop="COMPANY_NAME1" >
<el-input v-model="formParamters.COMPANY_NAME1" style="width:100px" >
</el-input></el-form-item>

這個時候驗證就沒問題
所以說element ui 表單驗證對于data的格式是不是有限定？不能像這樣formParamters.Header.COMPANY_NAME 的多重結(jié)構(gòu)？

回答
編輯回答
未命名

ele的表單校驗項如COMPANY_NAME必須為表單綁定data數(shù)據(jù)對象的一個屬性，這里多了一個中間的關(guān)系Header就沒辦法進行校驗了。這個時候要么把formParamters.Header.COMPANY_NAME改成formParamters.COMPANY_NAME，并且把js中的COMPANY_NAME放到formParamters的屬性中，第二就是把表單綁定的data改為formParamters.Header

2018年5月30日 21:22
編輯回答
萌吟

這兩天一直在研究這個校驗，也遇到了這個問題。 data只能識別綁定的對象的直接屬性。

后來研究出來兩種方式，題主可以試試。
一、用自定義校驗來做了，雖然別扭，不過展示的效果還算統(tǒng)一。
主要是自定義里面的value取不到，是通過app變量取出來。。。

rules: {COMPANY_NAME: [{ required: true, validator: validateCompanyName, message: '公司名稱', trigger: 'blur' }] }


var validateCompanyName = function(rule, value, callback) {
                if (app.formParamters.Header.COMPANY_NAME == null) {
                    callback(new Error(rule.message));
                    return;
                }

                callback();
            };

第二種，示例里面有個可以驗證list對象的屬性，我以為也可以對應(yīng)到多層對象，試了一下，可行。但是必須把rules寫在定義中，原因不明。

    :prop="'Header.COMPANY_NAME'"
    :rules="{
      required: true, message: '公司名稱不能為空', trigger: 'blur'
    }"
2017年7月23日 14:25