鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ el-form-item 包含多個input 怎么驗(yàn)證？

el-form-item 包含多個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="輸入人員域賬號" 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>

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

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

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

但是value一直是undefined。不知要怎么寫這個prop屬性才可行？

回答
編輯回答
笨笨噠

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

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

所以題主這樣寫是無法觸發(fā)校驗(yàn)的，一個el-form-item 也只能有一個 表單元素。
就題主的需求，得把 v-for 寫在 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="輸入人員域賬號" 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