el-form resetFields無效和validate無效的可能原因及解決方法
問題導(dǎo)入
在使用 el-form 過程中，尤其是表單驗(yàn)證這一塊，官方提供的 reserFields 方法以及驗(yàn)證方面存在一些坑，在此記錄一下，給大家提供可能的解決辦法。
簡(jiǎn)單實(shí)例
1、官方案例
先來看看官方提供的案例，對(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)名稱" 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)名稱', 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í)顚懟顒?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ì)的解釋，那么如果類似的表單重置 resetFields 時(shí)候無法成功，那么可能的原因有哪些呢？（以下皆由個(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)目開發(fā)過程中，通常 el-form 都是嵌套在el-dialog中。在表格頁面中，點(diǎn)擊添加或者修改按鈕，彈出同一個(gè)表單，因?yàn)閮蓚€(gè)操作都是類似的組件，不同的組件可以用 v-if 屏蔽掉，這也是大多數(shù)開發(fā)中公用組件的一個(gè)體現(xiàn)。
舉個(gè)個(gè)例：
通過添加按鈕和編輯按鈕都能夠打開這個(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="角色名稱" :label-width="formLabelWidth" prop="name">
<el-input v-model="form.name" autocomplete="off" placeholder="請(qǐng)輸入新角色英文名稱"></el-input>
</el-form-item>
<el-row>
<el-col :span="16">
<el-form-item label="中文名稱" :label-width="formLabelWidth" prop="nameZh">
<el-input v-model="form.nameZh" autocomplete="off" placeholder="請(qǐ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)輸入新角色英文名稱', trigger: 'blur' },
],
nameZh: [
{ required: true, message: '請(qǐ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ù)未填寫完整，請(qǐng)仔細(xì)核對(duì)！'
})
return false;
}
})
},
}
}
</script>
<style scoped>
.add-button {
margin: 18px 0 0 10px;
}
</style>
resetFields失效及解決辦法
先添加后編輯
一般打開這個(gè)頁面后，我們測(cè)試數(shù)據(jù)的時(shí)候，都是先點(diǎn)擊添加按鈕，關(guān)閉dialog后，再點(diǎn)擊編輯按鈕。
此時(shí)你使用this.$refs[formName].resetFields(); 是能夠?qū)⒈韱沃刂脼榭盏?，因?yàn)槌跏蓟臅r(shí)候，本來form數(shù)據(jù)就是空的。
先編輯后添加
但是若你先點(diǎn)擊編輯按鈕，通過父組件傳遞了 本行數(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()來希望重置數(shù)據(jù)。但是再點(diǎn)擊添加按鈕時(shí)，數(shù)據(jù)并沒有清除。
這個(gè)現(xiàn)象的原因是因?yàn)閐ialog是懶加載的，通過表格中的編輯按鈕打開dialog時(shí)，傳過來了父組件行數(shù)據(jù)。即初始化時(shí)數(shù)據(jù)并不是空的，而resetFields() 函數(shù)重置時(shí)，初始化的值是啥就是啥。
了解本質(zhì)后，那么解決這個(gè)問題就簡(jiǎn)單了，我們關(guān)閉彈出時(shí)，不使用resetFields()函數(shù)不就行了。而是這樣：
resetForm(formName) {
console.log("誰要重置數(shù)據(jù)??？" + formName)
// 重置表格內(nèi)容
this.form= {
roleId: '',
name: '',
nameZh: '',
enabled: 1,
description: '',
}
},
改動(dòng)后結(jié)果：
相當(dāng)于編輯退出后，將form表單初始化為空，這樣就無法出現(xiàn)污染了。但是這樣也有個(gè)問題，重置數(shù)據(jù)后，無法移除校驗(yàn)效果。好在官方給了我們方法，只需要添加一行。
resetForm(formName) {
console.log("誰要重置數(shù)據(jù)啊？" + formName)
// 重置表格內(nèi)容
this.form= {
roleId: '',
name: '',
nameZh: '',
enabled: 1,
description: '',
}，
// 不使用resetFields后，重置時(shí)無法移除校驗(yàn)效果，使用以下函數(shù)移除
this.$refs[formName].clearValidate();
},
validate失效及解決辦法
當(dāng)使用表單驗(yàn)證的時(shí)候，如果正常的驗(yàn)證都無誤，提交時(shí)，我們通過以下代碼來判斷是否驗(yàn)證成功。
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
...
}else {
this.$notify({
type: 'error',
message: '數(shù)據(jù)未填寫完整，請(qǐng)仔細(xì)核對(duì)！'
})
return false;
}
})
},
但是使用自定義驗(yàn)證規(guī)則是，注意規(guī)則中回調(diào)函數(shù)callback()一定要寫，官方文檔也寫的十分清楚。否則 if(valid) 條件無法判斷，而且它是沒有報(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)用。
這是目前碰到的表單問題，大家有什么好的解決方案或者新問題，歡迎在評(píng)論區(qū)留言，幫助大家解決問題！
3、model is required for validate to work!
2021/4/21
今天給表的表單添加驗(yàn)證規(guī)則的時(shí)候，el-form-item都配置好了prop屬性，但是無效，F(xiàn)12后給出一個(gè)警告
然后回去看el-form時(shí)候，才發(fā)現(xiàn) v-model = 沒有改成 :model，造成錯(cuò)誤，在此更新一下。
結(jié)尾
到此這篇關(guān)于el-form resetFields無效和validate無效的可能原因及解決方法的文章就介紹到這了,更多相關(guān)el-form resetFields無效和validate無效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 保留兩位小數(shù) 不能直接用toFixed(2) 的解決
這篇文章主要介紹了vue 保留兩位小數(shù) 不能直接用toFixed(2) 的解決操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue 命名視圖的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
vue-quill-editor的使用及個(gè)性化定制操作
這篇文章主要介紹了vue-quill-editor的使用及個(gè)性化定制操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
一文了解vue-router之hash模式和history模式
這篇文章主要介紹了一文了解vue-router之hash模式和history模式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
vue實(shí)現(xiàn)移動(dòng)端觸屏拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端觸屏拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要為大家詳細(xì)介紹了Vue3中Composition的一些常見API的用法，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-06-06
vue3實(shí)現(xiàn)旋轉(zhuǎn)圖片驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)旋轉(zhuǎn)圖片驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue狀態(tài)機(jī)的開啟與停止操作詳細(xì)講解
Vuex是專門為Vuejs應(yīng)用程序設(shè)計(jì)的狀態(tài)管理工具,這篇文章主要給大家介紹了關(guān)于Vuex狀態(tài)機(jī)快速了解與實(shí)例應(yīng)用的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要為大家介紹了Tree-Shaking?機(jī)制的快速掌握教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器的方法
最近在項(xiàng)目中使用 webpack 打包后升級(jí)，用戶反饋使用瀏覽器（chrome 45）訪問白屏。經(jīng)過排查發(fā)現(xiàn)：由于 chrome 45 無法兼容 ES6 語法導(dǎo)致的，接下來給大家介紹下Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器方法,需要的朋友可以參考下2023-02-02