快捷導(dǎo)航

el-form resetFields無(wú)效和validate無(wú)效的可能原因及解決方法

更新時(shí)間：2022年08月12日 11:46:05 作者：蘇格拉沒(méi)有底v

本文主要介紹了el-form resetFields無(wú)效和validate無(wú)效的可能原因及解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

問(wèn)題導(dǎo)入

在使用 el-form 過(guò)程中，尤其是表單驗(yàn)證這一塊，官方提供的 reserFields 方法以及驗(yàn)證方面存在一些坑，在此記錄一下，給大家提供可能的解決辦法。

簡(jiǎn)單實(shí)例

1、官方案例

先來(lái)看看官方提供的案例，對(duì)應(yīng)的官網(wǎng) 表單驗(yàn)證

對(duì)應(yīng)的代碼

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活動(dòng)名稱(chēng)" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活動(dòng)區(qū)域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="請(qǐng)選擇活動(dòng)區(qū)域">
      <el-option label="區(qū)域一" value="shanghai"></el-option>
      <el-option label="區(qū)域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活動(dòng)時(shí)間" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="選擇日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker placeholder="選擇時(shí)間" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="即時(shí)配送" prop="delivery">
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活動(dòng)性質(zhì)" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐廳線上活動(dòng)" name="type"></el-checkbox>
      <el-checkbox label="地推活動(dòng)" name="type"></el-checkbox>
      <el-checkbox label="線下主題活動(dòng)" name="type"></el-checkbox>
      <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊資源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="線上品牌商贊助"></el-radio>
      <el-radio label="線下場(chǎng)地免費(fèi)"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活動(dòng)形式" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即創(chuàng)建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '請(qǐng)輸入活動(dòng)名稱(chēng)', trigger: 'blur' },
            { min: 3, max: 5, message: '長(zhǎng)度在 3 到 5 個(gè)字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '請(qǐng)選擇活動(dòng)區(qū)域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '請(qǐng)選擇日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '請(qǐng)選擇時(shí)間', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '請(qǐng)至少選擇一個(gè)活動(dòng)性質(zhì)', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '請(qǐng)選擇活動(dòng)資源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '請(qǐng)?zhí)顚?xiě)活動(dòng)形式', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

對(duì)應(yīng)的字段含義，在官網(wǎng)上都有詳細(xì)的解釋?zhuān)敲慈绻?lèi)似的表單重置 resetFields 時(shí)候無(wú)法成功，那么可能的原因有哪些呢？（以下皆由個(gè)人實(shí)踐得出，具體原因有些不太懂，歡迎解釋補(bǔ)充）

resetFields 失敗可能原因

1: el-form 中使用 v-model="ruleForm"代替了:model="ruleForm"，正確的應(yīng)為后者。

2: el-form-item 中的 prop 屬性設(shè)置錯(cuò)誤，官網(wǎng)給出了解釋。即 prop=a, v-model=Form.a，Js中表單數(shù)據(jù)字段Form:{ a:'', b: [] }，需要一一對(duì)應(yīng)，不能出現(xiàn)差錯(cuò)。

3: <el-button @click="resetForm('ruleForm')">重置</el-button> resetForm(formName)的參數(shù)一定要和 el-form 中 ref ="formName"一致。

2、個(gè)人案例

項(xiàng)目開(kāi)發(fā)過(guò)程中，通常 el-form 都是嵌套在el-dialog中。在表格頁(yè)面中，點(diǎn)擊添加或者修改按鈕，彈出同一個(gè)表單，因?yàn)閮蓚€(gè)操作都是類(lèi)似的組件，不同的組件可以用 v-if 屏蔽掉，這也是大多數(shù)開(kāi)發(fā)中公用組件的一個(gè)體現(xiàn)。

舉個(gè)個(gè)例：

通過(guò)添加按鈕和編輯按鈕都能夠打開(kāi)這個(gè)dialog。

EditRole.vue

<template>
    <div style="text-align: left;">
        <el-button class="add-button" type="success" @click="dialogFormVisible = true">添加角色</el-button>
        <el-dialog
            :title="title"
            :visible.sync="dialogFormVisible"
            @close="clear" >
            <el-form :model="form"  ref="roleForm" :rules="rules">
                <el-form-item label="角色名稱(chēng)" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" autocomplete="off" placeholder="請(qǐng)輸入新角色英文名稱(chēng)"></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="中文名稱(chēng)" :label-width="formLabelWidth" prop="nameZh">
                            <el-input v-model="form.nameZh" autocomplete="off" placeholder="請(qǐng)輸入中文名稱(chēng)"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="是否可用" :label-width="formLabelWidth" prop="enabled">
                            <el-switch
                                v-model="form.enabled"
                                :active-value="1"
                                :inactive-value="0"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                            </el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="功能簡(jiǎn)述" :label-width="formLabelWidth" prop="description">
                    <el-input v-model="form.description" autocomplete="off"  type="textarea"
                              :autosize="{ minRows: 2, maxRows: 4}" placeholder="請(qǐng)輸入角色功能簡(jiǎn)述"></el-input>
                </el-form-item>
                <el-form-item prop="id" style="height: 0">
                    <el-input type="hidden" v-model="form.roleId" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="info" @click="resetForm('form')">重置</el-button>
                <el-button type="primary" @click="submitForm('roleForm')">確 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "EditRole",
    data () {
        return {
            form: {
                roleId: '',
                name: '',
                nameZh: '',
                enabled: 1,
                description: '',
            },
            // 表單驗(yàn)證規(guī)則
            rules: {
                name: [
                    { required: true, message: '請(qǐng)輸入新角色英文名稱(chēng)', trigger: 'blur' },
                ],
                nameZh: [
                    { required: true, message: '請(qǐng)輸入角色中文名稱(chēng)', trigger: 'blur' },
                ],
                description: [
                    { required: true, message: '請(qǐng)賦予角色簡(jiǎn)要的功能描述', trigger: 'blur' }
                ],
            },
            dialogFormVisible: false,
            formLabelWidth: '120px',
            isShow: true, //是否顯示父級(jí)菜單，添加的時(shí)候顯示，修改的時(shí)候不讓修改父級(jí)菜單。
            title: '添加角色',
        }
    },
   
    methods: {
        clear () {
            if (this.form.id !== '') {
                // 不為空，那么就是修改操作
                this.isShow = false;
                this.title = '修改角色'
            }
            // 關(guān)閉彈框后清空數(shù)據(jù)，
            this.resetForm('roleForm')
            this.isShow = true;
            this.title = '添加角色'
        },
        resetForm(formName) {
            // 重置表格內(nèi)容
            this.$refs[formName].resetFields();
        },
        submitForm (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    ...
                }else {
                    this.$notify({
                        type: 'error',
                        message: '數(shù)據(jù)未填寫(xiě)完整，請(qǐng)仔細(xì)核對(duì)！'
                    })
                    return false;
                }
            })

        },
    }
}
</script>

<style scoped>
    .add-button {
        margin: 18px 0 0 10px;
    }
</style>

resetFields失效及解決辦法

先添加后編輯

一般打開(kāi)這個(gè)頁(yè)面后，我們測(cè)試數(shù)據(jù)的時(shí)候，都是先點(diǎn)擊添加按鈕，關(guān)閉dialog后，再點(diǎn)擊編輯按鈕。

此時(shí)你使用this.$refs[formName].resetFields(); 是能夠?qū)⒈韱沃刂脼榭盏?，因?yàn)槌跏蓟臅r(shí)候，本來(lái)form數(shù)據(jù)就是空的。

先編輯后添加

但是若你先點(diǎn)擊編輯按鈕，通過(guò)父組件傳遞了 本行數(shù)據(jù) 到 el-dialog 的 el-form 時(shí)，退出后再點(diǎn)擊添加按鈕，此時(shí)會(huì)發(fā)現(xiàn)數(shù)據(jù)被污染，表單竟然不是空的，而是出現(xiàn)了剛才編輯那行的數(shù)據(jù)。圖示：

關(guān)閉彈窗時(shí)，我們?cè)O(shè)置了clear函數(shù)，clear函數(shù)為關(guān)閉dialog執(zhí)行的函數(shù)。其中調(diào)用了resetForm函數(shù)，即利用this.$refs[formName].resetFields()來(lái)希望重置數(shù)據(jù)。但是再點(diǎn)擊添加按鈕時(shí)，數(shù)據(jù)并沒(méi)有清除。

這個(gè)現(xiàn)象的原因是因?yàn)閐ialog是懶加載的，通過(guò)表格中的編輯按鈕打開(kāi)dialog時(shí)，傳過(guò)來(lái)了父組件行數(shù)據(jù)。即初始化時(shí)數(shù)據(jù)并不是空的，而resetFields() 函數(shù)重置時(shí)，初始化的值是啥就是啥。

了解本質(zhì)后，那么解決這個(gè)問(wèn)題就簡(jiǎn)單了，我們關(guān)閉彈出時(shí)，不使用resetFields()函數(shù)不就行了。而是這樣：

	resetForm(formName) {
        console.log("誰(shuí)要重置數(shù)據(jù)??？" + formName)
        // 重置表格內(nèi)容
        this.form= {
            roleId: '',
            name: '',
            nameZh: '',
            enabled: 1,
            description: '',
        }
	},

改動(dòng)后結(jié)果：

相當(dāng)于編輯退出后，將form表單初始化為空，這樣就無(wú)法出現(xiàn)污染了。但是這樣也有個(gè)問(wèn)題，重置數(shù)據(jù)后，無(wú)法移除校驗(yàn)效果。好在官方給了我們方法，只需要添加一行。

	resetForm(formName) {
        console.log("誰(shuí)要重置數(shù)據(jù)啊？" + formName)
        // 重置表格內(nèi)容
        this.form= {
            roleId: '',
            name: '',
            nameZh: '',
            enabled: 1,
            description: '',
        }，
        // 不使用resetFields后，重置時(shí)無(wú)法移除校驗(yàn)效果，使用以下函數(shù)移除
        this.$refs[formName].clearValidate();
	},

validate失效及解決辦法

當(dāng)使用表單驗(yàn)證的時(shí)候，如果正常的驗(yàn)證都無(wú)誤，提交時(shí)，我們通過(guò)以下代碼來(lái)判斷是否驗(yàn)證成功。

	submitForm (formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                ...
            }else {
                this.$notify({
                    type: 'error',
                    message: '數(shù)據(jù)未填寫(xiě)完整，請(qǐng)仔細(xì)核對(duì)！'
                })
                return false;
            }
        })

    },

但是使用自定義驗(yàn)證規(guī)則是，注意規(guī)則中回調(diào)函數(shù)callback()一定要寫(xiě)，官方文檔也寫(xiě)的十分清楚。否則 if(valid) 條件無(wú)法判斷，而且它是沒(méi)有報(bào)錯(cuò)的。

如自定義郵箱校驗(yàn)的時(shí)候：

	data() {
        const validateEmail = (rule, value, callback) => {
            let regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
            if (!regEmail.test(this.form.email)) {
                return callback(new Error("郵箱格式不正確")); // 有一個(gè)if 就要 一個(gè) callback
            }
            return callback(); // 返回一個(gè)回調(diào)函數(shù)給驗(yàn)證，是表單validate生效
        };
        return {
            // 表單數(shù)據(jù)
            form: {
                user_id: '',
                ...
                email: '',
            },
            // 表單驗(yàn)證規(guī)則
            rules: {
 				...
                email: [
                    { required: true, message: '請(qǐng)輸入真實(shí)郵箱地址，方便找回密碼', validator: validateEmail, trigger: 'blur' },
                ],
            },
        }
    },

callback() 回調(diào)函數(shù)必須要被調(diào)用。

這是目前碰到的表單問(wèn)題，大家有什么好的解決方案或者新問(wèn)題，歡迎在評(píng)論區(qū)留言，幫助大家解決問(wèn)題！

3、model is required for validate to work!

2021/4/21

今天給表的表單添加驗(yàn)證規(guī)則的時(shí)候，el-form-item都配置好了prop屬性，但是無(wú)效，F(xiàn)12后給出一個(gè)警告

然后回去看el-form時(shí)候，才發(fā)現(xiàn) v-model = 沒(méi)有改成 :model，造成錯(cuò)誤，在此更新一下。

結(jié)尾

到此這篇關(guān)于el-form resetFields無(wú)效和validate無(wú)效的可能原因及解決方法的文章就介紹到這了,更多相關(guān)el-form resetFields無(wú)效和validate無(wú)效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: