快捷導(dǎo)航

element-ui?form表單的動態(tài)rules校驗功能實現(xiàn)

更新時間：2023年07月26日 09:55:40 作者：史上最菜開發(fā)

在vue項目中，有時候可能會用到element-ui?form表單的動態(tài)rules校驗，這篇文章主要介紹了element-ui form表單的動態(tài)rules校驗,我們可以巧妙的運用element-ui form表單里面form-item的校驗規(guī)則來處理，本文結(jié)合實例代碼介紹的非常詳細，需要的朋友可以參考下

element-ui form表單的動態(tài)rules校驗

在vue 項目中，有時候可能會用到element-ui form表單的動態(tài)rules校驗，比如說選擇了哪個選項，然后動態(tài)顯示或者禁用等等。我們可以巧妙的運用element-ui form表單里面form-item想的校驗規(guī)則來處理（每一個form-item項都可以單獨校驗）。

上代碼：

<el-form-item
          label="3、屬于以下何種優(yōu)先配售類型（單選，符合以下條件之一即屬于優(yōu)先配售范圍）"
          prop="yxpslx"
          :rules="sqyxForm.jtpslx == '0' ? { required: true, message: '請選擇', 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)住房申購條件且共同申購</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)先保障對象</el-radio>
          </el-radio-group>
        </el-form-item>

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

vue elementui el-form rules動態(tài)驗證

一、介紹

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

圖片介紹：

1、在用戶選擇單選或多選時會有A,B,C,D,E五個選項

2、在用戶選擇簡答題時只會題干，答案以及解析選項（主要是通過v-if來進行判斷）

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

解決方法：在頁面加載的時候在computed方法中進行動態(tài)判斷直接返回賦值。

代碼介紹：

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

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