element-ui form表單的動(dòng)態(tài)rules校驗(yàn)

在vue 項(xiàng)目中，有時(shí)候可能會(huì)用到element-ui form表單的動(dòng)態(tài)rules校驗(yàn)，比如說(shuō)選擇了哪個(gè)選項(xiàng)，然后動(dòng)態(tài)顯示或者禁用等等。我們可以巧妙的運(yùn)用element-ui form表單里面form-item想的校驗(yàn)規(guī)則來(lái)處理（每一個(gè)form-item項(xiàng)都可以單獨(dú)校驗(yàn)）。

上代碼：

<el-form-item
          label="3、屬于以下何種優(yōu)先配售類型（單選，符合以下條件之一即屬于優(yōu)先配售范圍）"
          prop="yxpslx"
          :rules="sqyxForm.jtpslx == '0' ? { required: true, message: '請(qǐng)選擇', trigger: 'change'} : {}"
          label-width="600px"
          style="display:flex; flex-direction: column;"
          class="elformitem3"
        >
          <el-radio-group v-model="sqyxForm.yxpslx" :disabled="sqyxForm.jtpslx ==1" @change="changeYxpsRadio">
            <el-radio label="0" class="mb10" :disabled="sqyxForm.jtsgry == '0' && sqyxForm.jtpslx == '0'">A.夫妻雙方均符合共有產(chǎn)權(quán)住房申購(gòu)條件且共同申購(gòu)</el-radio
            ><br />
            <el-radio label="1" class="mb10" :disabled="sqyxForm.jtsgry == 1">B.港澳青年</el-radio>
            <br />
            <el-radio label="2" class="mb10" :disabled="sqyxForm.jtsgry == 1">C.二孩以上家庭</el-radio>
            <br />
            <el-radio label="3" :disabled="sqyxForm.jtsgry == 1">D.經(jīng)區(qū)政府批準(zhǔn)的優(yōu)先保障對(duì)象</el-radio>
          </el-radio-group>
        </el-form-item>

重點(diǎn)是這個(gè)： :rules=“sqyxForm.jtpslx == ‘0’ ? { required: true, message: ‘請(qǐng)選擇’, trigger: ‘change’} : {}”sqyxForm.jtpslx == ‘0’ 這個(gè)是我上面的選項(xiàng)來(lái)動(dòng)態(tài)顯示或者禁用的，當(dāng)禁用的時(shí)候，就不校驗(yàn)?。?！

vue elementui el-form rules動(dòng)態(tài)驗(yàn)證

一、介紹

簡(jiǎn)介：在使用elementUI el-form 中，對(duì)于業(yè)務(wù)不同的時(shí)候可能會(huì)產(chǎn)生不同表單結(jié)構(gòu)，但是都是存在同一個(gè)表單控件el-form中。

圖片介紹：

1、在用戶選擇單選或多選時(shí)會(huì)有A,B,C,D,E五個(gè)選項(xiàng)

2、在用戶選擇簡(jiǎn)答題時(shí)只會(huì)題干，答案以及解析選項(xiàng)（主要是通過v-if來(lái)進(jìn)行判斷）

問題引入：當(dāng)用戶選擇不同的題庫(kù)時(shí)會(huì)產(chǎn)生不同的form表單選項(xiàng)，這個(gè)時(shí)候在進(jìn)行表單提交驗(yàn)證的時(shí)候就需要根據(jù)不同試題類型進(jìn)行判斷，這個(gè)時(shí)候就需要兩個(gè)rules來(lái)動(dòng)態(tài)進(jìn)行表單校驗(yàn)。

解決方法：在頁(yè)面加載的時(shí)候在computed方法中進(jìn)行動(dòng)態(tài)判斷直接返回賦值。

代碼介紹：

// elementui信息
<el-form :model="addQueTable" ref="addQueTable" :rules="addQueRulesList">
<el-form>
// data中定義rules
updateQusRulesSel:[];
updateQusRules:[];
// computed方法
computed: {
// this.updateQusTable.showSelect自己定義的標(biāo)識(shí)
    updateQusRulesList: function() {
        if (this.updateQusTable.showSelect) {
		    return this.updateQusRulesSel;
	    } else {
		    return this.updateQusRules;
    }
}

總結(jié)：在computed中進(jìn)行值綁定，當(dāng)該表單顯示的時(shí)候就會(huì)觸發(fā)(一開始是隱藏的)，如果一開始頁(yè)面加載的時(shí)候就觸發(fā)會(huì)無(wú)法進(jìn)行值判斷，從而報(bào)錯(cuò)。其實(shí)能解決問題，通過該種方法。

二、最簡(jiǎn)單解決方法

在el-form中定義的rules檢驗(yàn)字段，如果你的rules中有字段通過v-if進(jìn)行隱藏，rules是不會(huì)對(duì)隱藏的字段選項(xiàng)進(jìn)行判斷，只要定義一個(gè)完整的rules就行，v-if隱藏的部分不會(huì)進(jìn)入校驗(yàn)方法中。

把簡(jiǎn)單的問題復(fù)雜化了?。。。?！

感謝該用戶：

到此這篇關(guān)于element-ui form表單的動(dòng)態(tài)rules校驗(yàn)的文章就介紹到這了,更多相關(guān)element-ui動(dòng)態(tài)rules校驗(yàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論