el-form-item 包含多個(gè)input 怎么驗(yàn)證？

<el-form-item v-for="member in memberList" style="display:flex;" prop="member">
    <el-select v-model="member.role" clearable filterable placeholder="選擇人物角色" style="width:35%">
        <el-option v-for="item in projectRole" :label="item.label" :key="item.value" :value="item.value">{{ item.label }}</el-option>
    </el-select>

    <el-input placeholder="輸入人員域賬號(hào)" v-model="member.username"  style="width:35%"></el-input>
    <el-button @click.prevent="removeMember(member)">刪除</el-button>
    <el-button @click.prevent="addMember">增加</el-button>
    <br />
</el-form-item>

如果一個(gè) el-form-item 中含有兩個(gè)輸入項(xiàng)，比如上面的，一個(gè)select，一個(gè)input，這種如果要使用 element-ui 的表單驗(yàn)證，該怎么寫(xiě)呢？

我嘗試了自定義表單驗(yàn)證，

// {trigger: 'change', validator: validatePass,}
var validatePass = (rule, value, callback) => {
    console.log(value);
    callback();
};

但是value一直是undefined。不知要怎么寫(xiě)這個(gè)prop屬性才可行？

回答

編輯回答

笨笨噠

<el-form-item v-for="member in memberList" style="display:flex;" prop="member"> 中的 prop 屬性名，要跟 el-form 的 model 對(duì)應(yīng)，也就是說(shuō)：

<el-form :model="form">
    <el-form-item  prop="member">
...
// 對(duì)應(yīng)的data 應(yīng)該是
data() {
    return {
        form: { member: `xxx` }
    }
}

所以題主這樣寫(xiě)是無(wú)法觸發(fā)校驗(yàn)的，一個(gè)el-form-item 也只能有一個(gè) 表單元素。
就題主的需求，得把 v-for 寫(xiě)在 el-form

<el-form v-for="member in memberList" :rules="rules">
    <el-form-item  style="display:flex;" prop="role">
        <el-select v-model="member.role" clearable filterable placeholder="選擇人物角色" style="width:35%">
                <el-option v-for="item in projectRole" :label="item.label" :key="item.value" :value="item.value">{{ item.label }}</el-option>
        </el-select>
    </el-form-item>
    
    <el-form-item  style="display:flex;" prop="username">
        <el-input placeholder="輸入人員域賬號(hào)" v-model="member.username"  style="width:35%"></el-input>
    </el-form-item>
    <el-button @click.prevent="removeMember(member)">刪除</el-button>
    <el-button @click.prevent="addMember">增加</el-button>
</el-form>

2018年6月12日 05:48