el-form表單驗(yàn)證的一些實(shí)用方法總結(jié)
前言
Form 組件提供了表單驗(yàn)證的功能,只需要通過 rules
屬性傳入約定的驗(yàn)證規(guī)則,并將 Form-Item 的 prop
屬性設(shè)置為需校驗(yàn)的字段名即可。
前置知識點(diǎn)
- 根據(jù)文檔說明,model為表單的數(shù)據(jù)對象,el-form通過model綁定數(shù)據(jù)。
- reles為表單驗(yàn)證規(guī)則對象,其中字段名要與model中的字段名一一對應(yīng)
- el-form-item 容器,通過 label 綁定標(biāo)簽,prop屬性設(shè)置為需要驗(yàn)證的字段名
- 表單組件通過 v-model 綁定 model 中的數(shù)據(jù)
表單校驗(yàn)相關(guān)屬性
- hide-required-asterisk:是否隱藏必填字段的標(biāo)簽旁邊的紅色星號(隱藏必錄標(biāo)識)
- inline-message:是否以行內(nèi)形式展示校驗(yàn)信息(驗(yàn)證消息是否在一行顯示)
方式一(無表單嵌套)
以一般的form表單為例:
<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>
一般在vue中這樣來寫,就可以對表單進(jìn)行驗(yàn)證。
data(){ return { ruleForm: { name: '' }, rules: { name: [ { required: true, message: '請輸入活動名稱', trigger: 'blur' }, { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' } ] } } },
如果有一些復(fù)雜的驗(yàn)證規(guī)則,也可以選擇自定義驗(yàn)證, validator
data() { const userValidator = (rule, value, callback) => { if (value.length > 3) { callback() } else { callback(new Error('用戶名長度必須大于3')) } } return {} } rules: { user: [ { validator: userValidator, trigger: 'change' } ] }
方式二(表單嵌套)
嵌套的表單,一般業(yè)務(wù)場景是,有一些表單項需要按照條件顯示或者隱藏,data里面的model數(shù)據(jù)可能會是對象里面套對象的,el-form也同樣支持嵌套的驗(yàn)證,寫法一般如下:
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活動名稱"> <el-input v-model="ruleForm.name"></el-input> <el-form-item prop="info.name"> <el-input v-model="ruleForm1.info.name"></el-input> </el-form-item> </el-form-item> <el-form> data(){ return { ruleForm: { info: { name: '' } }, } } rules里面同樣也可以這樣寫 rules: { info: { name: [{ required: true, message: '請選擇', trigger: 'change' }], } }
方式三(動態(tài)表單驗(yàn)證)
除了在 Form 組件上一次性傳遞所有的驗(yàn)證規(guī)則外還可以在單個的表單域上傳遞屬性的驗(yàn)證規(guī)則.
動態(tài)添加form-item的時候,可以使用
<el-form-item prop="email" label="郵箱" :rules="[ { required: true, message: '請輸入郵箱地址', trigger: 'blur' }, { type: 'email', message: '請輸入正確的郵箱地址', trigger: ['blur', 'change'] } ]" > <el-input v-model="dynamicValidateForm.email"></el-input> </el-form-item>
方式四(動態(tài)添加校驗(yàn)規(guī)則)
根據(jù)條件判斷是否需要某種驗(yàn)證規(guī)則時,一個簡單的使用場景就是,通過不同的type去顯示不同的錯誤信息。
const message = this.type === 'addFirst' ? '請輸入一級名稱' : this.type === 'addChild' ? '請輸入二級名稱' : this.type === 'addThree' && this.editChannelItem ? '請選擇三級名稱' : '請輸入三級名稱'; const validatorHandle = (rule, value, callback) => { if (value) { callback(); } else { callback(new Error(message)); } }; const newRule = [...this.formInfoRules.name, { validator: validatorHandle, trigger: 'blur' }]; this.formInfoRules = Object.assign({}, this.formInfoRules, { name: newRule });
方式五(手動控制校驗(yàn)狀態(tài))
error
錯誤信息
validate-status
驗(yàn)證狀態(tài)。 success 驗(yàn)證成功, error驗(yàn)證失敗, validating驗(yàn)證中,''未驗(yàn)證
這樣使用:
<el-form-item :error="validateFormState.error" :validate-status="validateFormState.state" > </el-form-item> validateFormState = { periodSendDateError: '', periodSendDateStatus: 'success', }; 在驗(yàn)證成功或者失敗的時候去手動控制error和validate-status的值即可。
總結(jié)
到此這篇關(guān)于el-form表單驗(yàn)證的一些實(shí)用方法總結(jié)的文章就介紹到這了,更多相關(guān)el-form表單驗(yàn)證內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
5個可以加速開發(fā)的VueUse函數(shù)庫(小結(jié))
VueUse為Vue開發(fā)人員提供了大量適用于Vue2和Vue3的基本Composition API 實(shí)用程序函數(shù)。具有一定的參考價值,感興趣的可以了解一下2021-11-11Vue3項目中配置TypeScript和JavaScript的兼容
在Vue3開發(fā)中,常見的使用JavaScript(JS)編寫代碼,但也會有調(diào)整編寫語言使用TypeScript(TS)的需求,因此,在Vue3項目設(shè)置中兼容TS和JS是刻不容緩的重要任務(wù),2023-08-08Vue實(shí)現(xiàn)頁面的局部刷新(router-view頁面刷新)
本文主要介紹了Vue實(shí)現(xiàn)頁面的局部刷新(router-view頁面刷新),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-12-12vue實(shí)現(xiàn)ToDoList簡單實(shí)例
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)ToDoList簡單實(shí)例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02vue自定義組件實(shí)現(xiàn)v-model雙向綁定數(shù)據(jù)的實(shí)例代碼
vue中父子組件通信,都是單項的,直接在子組件中修改prop傳的值vue也會給出一個警告,接下來就用一個小列子一步一步實(shí)現(xiàn)了vue自定義的組件實(shí)現(xiàn)v-model雙向綁定,需要的朋友可以參考下2021-10-10