鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ vue component elementUI的表單驗(yàn)證

vue component elementUI的表單驗(yàn)證

我自己寫了一個(gè)alert的組件,里面是一個(gè)表單數(shù)據(jù),我的大概思路如下:
通過父組件傳遞子組件需要的表單展示,比如我會(huì)定義一個(gè)數(shù)組{name:"",value:"",type:""}通過type定義表單是text、areatext、select等等,如果有value值,子組件就通過v-modle="item.value"這樣綁定。
但是現(xiàn)在的一個(gè)問題是,我無法實(shí)現(xiàn) 表單驗(yàn)證
問題就是我現(xiàn)在發(fā)現(xiàn)我無法把v-model與value對(duì)等,進(jìn)而無法實(shí)現(xiàn)表單驗(yàn)證。v-model傳過來是一個(gè)值,不是一個(gè)變量。我這邊輸入的值,也無法跟具體的變量對(duì)應(yīng),盡而無法實(shí)現(xiàn)驗(yàn)證。
我的alert表單代碼如下
<div id="alert">

    <el-dialog :title="alertTitle" :visible.sync="dialogFormVisible" >
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" size="small" id="alertForm">
            <el-form-item :label="item.option"  v-for="(item,index) in lists" :key="item.name" :prop="item.name" :rules="item.rules">
                <el-input  auto-complete="off"
                           class="input_text"
                           v-if="item.type==1"
                           :name="item.name"
                           v-model="item.value"
                           :disabled="disabled"
                ></el-input>
                <el-select
                        style="width:100%"
                        v-else-if="item.type==2"
                        :name="item.name"
                        placeholder="請(qǐng)選擇"
                        v-model="item.value"
                        :disabled="disabled"
                >
                    <el-option
                            v-for="list in item.options"
                            :key="list.key"
                            :value="list.value"
                            >
                    </el-option>
                </el-select>
                <el-input
                        auto-complete="off"
                        type="textarea"
                        v-else-if="item.type==3"
                        :name="item.name"
                        v-model="item.value"
                        :disabled="disabled"
                ></el-input>
                <el-date-picker
                        v-else-if="item.type==4"
                        :name="item.name"
                        v-model="item.value"
                        :default-value="item.value"
                        :disabled="disabled"
                        type="datetime"
                        placeholder="選擇日期"
                        format="yyyy 年 MM 月 dd 日 HH : mm : ss"
                        value-format="yyyyMMddHHmmss"
                       >
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="isModify">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')" v-if="isCreate">新增</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')" v-else>修改</el-button>
        </div>
        <div slot="footer" class="dialog-footer" v-else>
            <el-button type="primary" @click="dialogFormVisible = false">返回</el-button>
        </div>
    </el-dialog>
</div>
回答
編輯回答
選擇

講真,不太理解題主想表達(dá)的。。。建議以后提問盡量簡(jiǎn)化,不需要的代碼可以刪除(比如前面ele自己的提供的案例)
圈重點(diǎn):ele的表單驗(yàn)證對(duì)應(yīng)的是el-form-item標(biāo)簽的prop變量,驗(yàn)證的值是綁定的v-model的值,需要注意的是prop變量必須是el-form標(biāo)簽綁定的:data對(duì)象的屬性,否則也無法驗(yàn)證

2017年3月22日 15:17