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+OpenLayers?創(chuàng)建地圖并顯示鼠標(biāo)所在經(jīng)緯度(完整代碼)
這篇文章主要介紹了Vue+OpenLayers?創(chuàng)建地圖并顯示鼠標(biāo)所在經(jīng)緯度,本文使用的是高德地圖，結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue3下eslint配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了Vue代理報錯404問題及解決(vue配置proxy)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
關(guān)于Vue?ui?的沒反應(yīng)、報錯問題解決總結(jié)
這篇文章主要介紹了關(guān)于Vue?ui?的沒反應(yīng)、報錯問題解決總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要給大家介紹了關(guān)于vue打開新窗口并實現(xiàn)傳參的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
本文通過實例代碼給大家介紹了vue實現(xiàn)評論列表功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-10-10
使用mint-ui實現(xiàn)省市區(qū)三級聯(lián)動效果的示例代碼
下面小編就為大家分享一篇使用mint-ui實現(xiàn)省市區(qū)三級聯(lián)動效果的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家介紹了vue-router鉤子執(zhí)行順序示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要介紹了vue store之狀態(tài)管理模式的詳細介紹，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Element-Ui組件 NavMenu 導(dǎo)航菜單的具體使用
這篇文章主要介紹了Element-Ui組件 NavMenu 導(dǎo)航菜單的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10