vue2使用elform的rules校驗的示例詳解
在使用vue2開發(fā)項目的時候使用element組件的el-form大多數(shù)情況都需要用到必填項校驗
舉個栗子：
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活動名稱" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活動區(qū)域" prop="region">
<el-select v-model="ruleForm.region" placeholder="請選擇活動區(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>
<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: '',
},
rules: {
name: [
{ required: true, message: '請輸入活動名稱', trigger: 'blur' },
{ min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
],
region: [
{ required: true, message: '請選擇活動區(qū)域', trigger: 'change' }
],
}
};
},
methods: {
submitForm(ruleForm) {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(ruleForm) {
this.$refs[ruleForm].resetFields();
}
}
}
</script>這里我們的表單里有‘活動名稱(輸入框)’和‘活動區(qū)域(下拉框)’兩個選項，我們在<el-form>這里寫了
:rules="rules"
這就代表我們這個el-form表單的校驗是根據(jù)rules來的，而在下面<el-form-item>里我們寫了'prop="xxx"',這里的屬性為rules里需要校驗的字段名,也就是data里定義的
rules: {
name: [
{ required: true, message: '請輸入活動名稱', trigger: 'blur' },
{ min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
],
region: [
{ required: true, message: '請選擇活動區(qū)域', trigger: 'change' }
],
}*這里需要注意的是我們prop里的字段和rules里的字段名一定要對應(yīng)上，這樣el-form表單的校驗才會生效
然后我們在點擊確定的時候調(diào)方法進行校驗即可
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});這里的[ruleForm]要跟上面el-form表單的ref的命名保持一致
更新：
如果遇到需要動態(tài)加校驗
我們只需要在el-form-item這里加上
:rules="定義的變量 ? rules.name : []"
像這樣
<el-form-item label="活動名稱" prop="name"
:rules="定義的變量 ? rules.name: []">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>這個定義的變量是用來動態(tài)判斷是否需要加校驗的，這個值你只需要放在你需要判斷是否需要加校驗的地方就行了
*這里有個點需要注意，單獨加的校驗有可能會在你輸入/選擇選項之后還是提示校驗未通過
這個時候我們需要在輸入框/下拉框的change事件里再單獨執(zhí)行一下校驗就可以了，比如像這樣：
change方法名() {
this.$refs.ruleForm.validateField('name'); // 需要判斷的那個選項的prop，要對應(yīng)rules里定義的值
},這樣就實現(xiàn)了對一個選項動態(tài)加判斷校驗
附加element的官網(wǎng)地址：Element - The world's most popular Vue UI framework
到此這篇關(guān)于關(guān)于vue2使用elform的rules校驗的文章就介紹到這了,更多相關(guān)vue2 elform rules校驗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue 3.0x中的Suspense和異步組件,我們將討論新的defineAsyncComponent函數(shù),以及如何利用Suspense組件來更好地處理異步組件的加載和顯示,需要的朋友可以參考下2023-08-08
vue3中使用print-js組件實現(xiàn)打印操作步驟
文章介紹了在Vue?3中使用print-js組件實現(xiàn)打印操作的步驟,包括安裝依賴、創(chuàng)建打印組件和處理打印預(yù)覽界面,文章還提到打印預(yù)覽界面的樣式調(diào)整對打印效果的影響,并展示了HTML展示和打印預(yù)覽效果,最后,文章鼓勵讀者繼續(xù)瀏覽相關(guān)文章并支持腳本之家2025-02-02
這篇文章主要介紹了vue3.0 加載json的方法（非ajax），幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
Vuex中mutations與actions的區(qū)別詳解
下面小編就為大家分享一篇Vuex中mutations與actions的區(qū)別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
詳解用vue.js和laravel實現(xiàn)微信授權(quán)登陸
本篇文章主要介紹了詳解用vue.js和laravel實現(xiàn)微信授權(quán)登陸，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
本文講述了項目中實現(xiàn)上傳視頻并顯示上傳進度的功能,首先使用axios庫進行單文件引入,未進行封裝,通過element組件庫實現(xiàn)選擇文件上傳,并打印選擇文件的信息,上傳完成后,可以在展示區(qū)域顯示上傳的視頻,鼠標移入播放區(qū)域時會有相應(yīng)的效果2026-02-02
vue2從數(shù)據(jù)變化到視圖變化之nextTick使用詳解
這篇文章主要為大家介紹了vue2從數(shù)據(jù)變化到視圖變化之nextTick使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
我們在開發(fā) Vue 項目的時候會使用一些前端組件庫,例如 Element、Ant Design 等,這些組件庫雖然方便,但是也有一些缺點,比如內(nèi)置的圖標太少,例如我們開發(fā)醫(yī)療、財務(wù)、工程等一些前端項目,內(nèi)置的圖標不能滿足我們的需求,所以我們常常在Vue項目中引入SVG圖標2024-09-09
這篇文章主要通過源碼分析介紹了Vue.js的監(jiān)聽實現(xiàn)，文中通過示例代碼介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
Vue.js計算機屬性computed和methods方法詳解
這篇文章主要為大家詳細介紹了Vue.js計算機屬性computed和methods方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10