詳解基于element的區(qū)間選擇組件校驗(交易金額)
需求:
這里以項目的需求為例,基本的需求如下:
- 分為左右值,包含左右值,正整數(shù)
- 左側(cè)必須大于等于1,右側(cè)無限大,右側(cè)值必須不小于左側(cè)
- 左側(cè)填寫數(shù)據(jù),右側(cè)標(biāo)為必填;右側(cè)填寫數(shù)據(jù),左側(cè)標(biāo)為必填
- 失焦校驗成果:
代碼如下:(頁面)
<el-col :span="8" v-if="item.qttccType === 1"> <el-col :span="14"> <el-form-item :label="item.qttccName" :prop="'list.'+ index + '.startNum'" :rules="item.qttccName === '交易金額' ? startMoneyRule(tIndex) : []"> <el-input v-model.number="item.qttcStartNum" style="width: 100%;" @change="handleMinChange(index)"></el-input> </el-form-item> </el-col> <el-col :span="10"> <el-form-item label="~" label-width="10px" :prop="'list.'+ index + '.qttcEndNum'" :rules="item.qttccName === '交易金額' ? endMoneyRule(tIndex) : []"> <el-input v-model.number="item.qttcEndNum" style="width: 60%;" @change="handleMaxChange(index)"></el-input> </el-form-item> </el-col> </el-col>
主要思路:
- 單個表單校驗:左側(cè)填寫數(shù)據(jù),右側(cè)標(biāo)為必填;右側(cè)填寫數(shù)據(jù),左側(cè)標(biāo)為必填、正整數(shù)校驗、區(qū)間校驗
- 關(guān)聯(lián)校驗:右側(cè)閾值不得小于左側(cè)閾值
根據(jù)上面的思路,單個表單的校驗屬于公共校驗方法,關(guān)聯(lián)校驗需要分別校驗(因為對比對象不同,且提示語不同),由此在自定義校驗中有了如下定義:
公共校驗方法:正整數(shù)校驗、區(qū)間校驗
validateCom(rule, value, callback) { const MIN_NUMBER = 1 const one = Number(value) if (Number.isInteger(one)) { if (one < MIN_NUMBER) { return callback(new Error('輸入值必須大于0')) } else if (one.length > 50) { callback(new Error('最大長度為50位')) } return callback() } return callback(new Error('請輸入數(shù)字值')) }
關(guān)聯(lián)校驗:
startMoneyRule(index) { const validateMin = (rule, value, callback) => { const one = Number(value) const max = Number(this.form.list[index].qttcEndNum) if (!max || one < max) { return callback() } return callback(new Error('輸入值不得大于最大閾值')) } const R = [] R.push({ required: false, message: '請?zhí)顚懡灰捉痤~最小值', trigger: 'blur' }, { validator: this.validateCom, trigger: 'blur' }, { validator: validateMin, trigger: 'blur' }) return R }, endMoneyRule(index) { const validateMax = (rule, value, callback) => { const one = Number(value) const min = Number(this.form.list[index].qttcStartNum) if (!min || one > min) { return callback() } return callback(new Error('輸入值不得小于最小閾值')) } const R = [] R.push({ required: false, message: '請?zhí)顚懡灰捉痤~最大值', trigger: 'blur' }, { validator: this.validateCom, trigger: 'blur' }, { validator: validateMax, trigger: 'blur' }) return R }
填坑(重點)
很顯然,左側(cè)值是小于右側(cè)值的,但是校驗提示仍然報錯。究其原因,還是關(guān)聯(lián)校驗的問題。既然是關(guān)聯(lián)交驗,改變其中一個時應(yīng)該會重新校驗兩個。很簡單,在input改變時,重新校驗表單不就OK了嗎
handleMinChange(index) { this.$refs.form.validateField('list.' + index + '.qttcEndNum') }, handleMaxChange(index) { this.$refs.form.validateField('list.' + index + '.qttcStartNum') }
大功告成,忘說了。我的表單是動態(tài)從后臺獲取的,所以校驗rules是動態(tài)加的?。?!
到此這篇關(guān)于詳解基于element的區(qū)間選擇組件校驗(交易金額)的文章就介紹到這了,更多相關(guān)element 區(qū)間選擇組件校驗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 基于Vue+elementUI實現(xiàn)動態(tài)表單的校驗功能(根據(jù)條件動態(tài)切換校驗格式)
- 詳解element-ui 表單校驗 Rules 配置 常用黑科技
- Vue ElementUi同時校驗多個表單(巧用new promise)
- element表單驗證如何清除校驗提示語
- vue elementUI 表單校驗功能之?dāng)?shù)組多層嵌套
- Vue?elementUI表單嵌套表格并對每行進行校驗詳解
- element form 校驗數(shù)組每一項實例代碼
- element多個表單校驗的實現(xiàn)
- element中el-table中的el-input校驗的實現(xiàn)
相關(guān)文章
關(guān)于vue中@click.native.prevent的說明
這篇文章主要介紹了關(guān)于vue中@click.native.prevent的說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03解決vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長的問題
vue-quill-editor默認(rèn)插入圖片是直接將圖片轉(zhuǎn)為base64再放入內(nèi)容中,如果圖片較多,篇幅太長,就會比較煩惱,接下來通過本文給大家介紹vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長的問題及解決方法,需要的朋友可以參考下2018-08-08Vue使用emit傳參,父組件接收不到數(shù)據(jù)的問題及解決
這篇文章主要介紹了Vue使用emit傳參,父組件接收不到數(shù)據(jù)的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09ElementUI中el-dropdown-item點擊事件無效問題
這篇文章主要介紹了ElementUI中el-dropdown-item點擊事件無效問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04vue+iview+less+echarts實戰(zhàn)項目總結(jié)
本篇文章是作者通過學(xué)習(xí)vue+iview+less+echarts制作一個小系統(tǒng)后,做的心得以及遇到的坑的總結(jié),值得大家學(xué)習(xí)參考。2018-02-02vue.js將時間戳轉(zhuǎn)化為日期格式的實現(xiàn)代碼
這篇文章主要介紹了vue.js將時間戳轉(zhuǎn)化為日期格式的實現(xiàn)代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06Vue3項目引入阿里iconfont圖標(biāo)與字體及使用教程
Iconfont國內(nèi)功能很強大且圖標(biāo)內(nèi)容很豐富的矢量圖標(biāo)庫,提供矢量圖標(biāo)下載、在線存儲、格式轉(zhuǎn)換等功能,下面這篇文章主要給大家介紹了關(guān)于Vue3項目引入阿里iconfont圖標(biāo)與字體及使用教程,需要的朋友可以參考下2023-05-05