解決input輸入框僅支持輸入數(shù)字及兩位小數(shù)點(diǎn)的限制
nput輸入后即時(shí)從接口獲取數(shù)據(jù)的驗(yàn)證
(僅支持輸入數(shù)字及兩位小數(shù)點(diǎn)的數(shù)字)
- input輸入后將輸入內(nèi)容傳給后端,并且即時(shí)從后端拿到計(jì)算后的數(shù)值
問題及難點(diǎn)
- 輸入框內(nèi)容是否符合后端要求規(guī)范(如果不符合規(guī)范發(fā)請(qǐng)求會(huì)報(bào)400)
- 前端做數(shù)據(jù)驗(yàn)證
解決方案
<!-- vue及elementUI --> <!-- v-model監(jiān)聽數(shù)據(jù)內(nèi)容及校驗(yàn)規(guī)則 --> <!-- elementUI已按規(guī)定寫好 --> <el-input v-model="ruleForm.computeFun" @blur="computeCash"> </el-input> <p>{{ ruleform.numCompute }}</p> <script> return{ ruleForm:{ numCompute: '' }, rules:{ computeFun:[ { type: 'string', required: true, message: '請(qǐng)輸入保留兩位小數(shù)的金額' }, { validator: (rule, value, callback) => { // 保留兩位小數(shù)驗(yàn)證 if (!/^\d+(\.\d{1,2})?$/.test(value)) { callback(new Error('必須輸入數(shù)字,且最多保留兩位小數(shù)')) } else if (value > 10000000) { callback(new Error('不允許大于1000000')) } else { callback() } }, trigger: 'blur' } ]} }, methods:{ async computeCash () { if (this.ruleForm.numCompute <1000000 && /^\d+(\.\d{1,2})?$/.test(this.ruleForm.numCompute)){ //發(fā)請(qǐng)求的參數(shù) axios.xxx().then() this.ruleForm.numCompute = 后端拿到的數(shù)據(jù)進(jìn)行處理(比如單位) } else { this.$notify({ title: '提示‘, message: '必須輸入小于1000000且符合規(guī)則的數(shù)據(jù)', type: 'warning' }) } } } } </script>
基本邏輯
- 監(jiān)聽輸入內(nèi)容,初步通過elementui的校驗(yàn)規(guī)則進(jìn)行判斷,通過初步校驗(yàn)規(guī)則后,調(diào)用計(jì)算函數(shù)(后端請(qǐng)求),在此函數(shù)內(nèi)進(jìn)行判斷,如果判斷不通過就報(bào)提示,如果通過判斷再發(fā)請(qǐng)求。獲取數(shù)據(jù)
- 兩層規(guī)則處理,實(shí)際過程中只有通過該規(guī)則后才能發(fā)送請(qǐng)求
以上就是解決input輸入框僅支持輸入數(shù)字及兩位小數(shù)點(diǎn)的限制的詳細(xì)內(nèi)容,更多關(guān)于input輸入框小數(shù)點(diǎn)位數(shù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
基于Bootstrap的標(biāo)簽頁組件及bootstrap-tab使用說明
這篇文章主要介紹了基于Bootstrap的標(biāo)簽頁組件及bootstrap-tab使用說明,需要的朋友可以參考下2017-07-07JS中實(shí)現(xiàn)一個(gè)下載進(jìn)度條及播放進(jìn)度條的代碼
這篇文章主要介紹了JS中實(shí)現(xiàn)一個(gè)下載進(jìn)度條及播放進(jìn)度條的代碼,本文圖文并茂給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06用Javascript檢查Adobe PDF插件是否安裝的實(shí)現(xiàn)代碼
用Javascript檢查Adobe PDF插件是否安裝的代碼2009-12-12JavaScript常用對(duì)象的方法和屬性小結(jié)
JavaScript是基于對(duì)象的語言。我們知道,對(duì)象是由一組數(shù)據(jù)(JavaScript中稱之為屬性)和施加在這組數(shù)據(jù)上的方法組成的。JavaScript中還有一些不屬于任何對(duì)象的系統(tǒng)函數(shù)2012-01-01js與vue如何實(shí)現(xiàn)自動(dòng)全屏顯示效果
這篇文章主要給大家介紹了關(guān)于js與vue如何實(shí)現(xiàn)自動(dòng)全屏顯示效果的相關(guān)資料,在vue項(xiàng)目中做一個(gè)可以控制頁面全屏展示的效果,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12JS實(shí)現(xiàn)網(wǎng)頁上隨滾動(dòng)條滾動(dòng)的層效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁上隨滾動(dòng)條滾動(dòng)的層效果代碼,涉及JavaScript頁面元素屬性的獲取、運(yùn)算及設(shè)置等操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11如何在selenium中使用js實(shí)現(xiàn)定位
這篇文章主要介紹了如何在selenium中使用js實(shí)現(xiàn)定位,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08如何在JavaScript中使用map()迭代數(shù)組詳細(xì)步驟
在JavaScript中循環(huán)迭代數(shù)組的方法有很多種,下面這篇文章主要給大家介紹了關(guān)于如何在JavaScript中使用map()迭代數(shù)組的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02