解決input輸入框僅支持輸入數(shù)字及兩位小數(shù)點(diǎn)的限制
更新時間:2023年11月29日 10:50:54 作者:HUMILITY
這篇文章主要為大家介紹了解決input輸入框僅支持輸入數(shù)字及兩位小數(shù)點(diǎn)的限制技巧示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
nput輸入后即時從接口獲取數(shù)據(jù)的驗證
(僅支持輸入數(shù)字及兩位小數(shù)點(diǎn)的數(shù)字)
- input輸入后將輸入內(nèi)容傳給后端,并且即時從后端拿到計算后的數(shù)值
問題及難點(diǎn)
- 輸入框內(nèi)容是否符合后端要求規(guī)范(如果不符合規(guī)范發(fā)請求會報400)
- 前端做數(shù)據(jù)驗證
解決方案
<!-- vue及elementUI -->
<!-- v-model監(jiān)聽數(shù)據(jù)內(nèi)容及校驗規(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: '請輸入保留兩位小數(shù)的金額' },
{ validator: (rule, value, callback) => {
// 保留兩位小數(shù)驗證
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ā)請求的參數(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的校驗規(guī)則進(jìn)行判斷,通過初步校驗規(guī)則后,調(diào)用計算函數(shù)(后端請求),在此函數(shù)內(nèi)進(jìn)行判斷,如果判斷不通過就報提示,如果通過判斷再發(fā)請求。獲取數(shù)據(jù)
- 兩層規(guī)則處理,實(shí)際過程中只有通過該規(guī)則后才能發(fā)送請求
以上就是解決input輸入框僅支持輸入數(shù)字及兩位小數(shù)點(diǎn)的限制的詳細(xì)內(nèi)容,更多關(guān)于input輸入框小數(shù)點(diǎn)位數(shù)的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
uniapp實(shí)現(xiàn)微信小程序一鍵登錄功能
這篇文章給大家介紹了uniapp實(shí)現(xiàn)微信小程序一鍵登錄功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-10-10
原生JS實(shí)現(xiàn)隨機(jī)點(diǎn)名項目的實(shí)例代碼
這篇文章主要介紹了原生JS實(shí)現(xiàn)隨機(jī)點(diǎn)名項目的實(shí)例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2019-04-04
JS獲取本地文件并進(jìn)行網(wǎng)絡(luò)傳輸?shù)拇a詳解
在web中如想要獲取用戶計算機(jī)上的文件我們通常會用到的方法是通過一個表單元素<input type="file">操作用戶選擇的文件,本文小編給大家介紹了JS獲取本地文件并進(jìn)行網(wǎng)絡(luò)傳輸?shù)姆椒?需要的朋友可以參考下2024-08-08
js中textContent、innerText和innerHTML的用法以及區(qū)別
這篇文章主要介紹了JavaScript中textContent、innerText和innerHTML的用法以及區(qū)別,需要的朋友可以參考下2023-05-05

