1. 程式人生 > >vue 輸入框 限定輸入金額的範圍並且用千分符顯示,初始值有格式限制

vue 輸入框 限定輸入金額的範圍並且用千分符顯示,初始值有格式限制

為了避免程式碼的耦合,利於後期維護,儘量將功能函式分開來寫。
首先是千分符轉化
comdify(n) {
let re = /\d{1,3}(?=(\d{3})+$)/g;
let n1 = n.replace(/^(\d+)((\.\d+)?)$/, function (s, s1, s2) {
return s1.replace(re, "$&,") + s2;
});
return n1;
}

將千分符格式的金額數字轉化成普通格式的數字
delcommafy(num){//去除千分位中的‘,’
num = num.toString();
num = num.replace(/,/gi, '');
return num;
}


input框增加@blur事件 觸發格式化函式
minValue 限制輸入框的最小金額 ,代表<=
maxValue 限制輸入框的最大金額,代表>=
names 每個輸入框傳入值的名字 例如 v-model=’amount’
callback 此回撥函式需要傳入Boolean值,如果是true代表需要將此input框內的值,進行千分符轉換,如果是false,則代表不需要進行轉換 ,直接return 返回即可。
小提示:methods裡邊的函式,因為this的指向都是vue掛載的例項。所以避免使用箭頭函式,因為箭頭函式會改變this。詳細請 (參照阮一峰的js標準教程

` show_number(minValue, maxValue, names, callback){
if (names == ‘amount’) {
if (!this.items.amount || parseFloat(this.items.amount) == ‘0’) {
loadingTip.show(‘請輸入要求範圍的金額’, 1000)
this.items.amount = ”;
return;
}
} else {
if (!this.items[names] || parseFloat(this.items[names]) == ‘0’) {
this.items[names] = ‘0.00’;
return;
}
}
if (this.items[names] && parseFloat(this.items[names]) != ‘0’) {
if (!isNaN(parseFloat(this.delcommafy(this.items[names])))) {
let itemValue = parseFloat(this.delcommafy(this.items[names]));
console.log(this.delcommafy(this.items[names]))
if (itemValue >= minValue && itemValue <= maxValue) {
this.items[names] = Number(this.items[names]).toFixed(2);
if (callback) {
this.items[names] = this.comdify(Number(itemValue).toFixed(2));
}
} else {
loadingTip.show(‘請輸入要求範圍的金額’, 1000);
this.items[names] = ”;
return;
}
} else {
loadingTip.show(‘請輸入正確的金額’, 1000);
this.items[names] = ”;
return;
}
}

} `

關於函式內部使用 中間值進行儲存並轉化,原因是:在input框輸入內容後,@blur事件觸發後,會對內容進行格式化,並填到相應的輸入框中。注意 因為輸入框內容進行改變之後,又會觸發input的blur事件,此時取到的值是輸入框的值(經過千分符轉換的值)。在進行轉換過程中,會轉換成NaN.所以使用中間值itemValue 將第一次進行轉換的值進行儲存,利用轉換這個中間值對input框進行比較。

相關推薦

vue 輸入 限定輸入金額範圍並且顯示初始格式限制

為了避免程式碼的耦合,利於後期維護,儘量將功能函式分開來寫。 首先是千分符轉化 comdify(n) { let re = /\d{1,3}(?=(\d{3})+$)/g; let n1 = n.repla

input輸入輸入格式限定

一般是根據正則表示式匹配的:下面是幾個正則表示式的含義 /i (忽略大小寫) /g (全文查找出現的所有匹配字元) /m (多行查詢) /gi(全文查詢、忽略大小寫) /ig(全文查詢、忽略大小寫) 0.文字框不能黏貼文字 <input onbef

JS通過正則限制 input 輸入只能輸入整數、小數(金額或者現金) 兩位小數

第一: 限制只能是整數 ? 1 <input type = "text" name= "number" id = 'number' onkeyup= "if(! /^d+$/.t

JS驗證輸入只能輸入數字並且只能含有2位小數

<script language="JavaScript" type="text/javascript"> //輸入框只能輸入數字,並且只能含有2為小數 function clearNoNum(obj){ obj.value = obj.value.replace(/[^\d.]/g,""); /

vue使用動態渲染v-model輸入無法輸入內容

names 設置 method 默認 eth sch class mod 解決 最近使用ElementUI框架,在動態渲染表單的時候,表單框無法輸入內容,但是綁定model的數據是會發生變化 解決方法: 將動態生成的表單對象,深拷貝到 data 對象中 <e

vue 通過css實現輸入居中輸入

今天開發時突然想寫blog了,水一下(o゚v゚)ノ css程式碼 .inputStyle { text-align: center;/*主要就是這個,下面的都是樣式*/ width: 6rem; height: 2.5rem; border: 1px solid #5a5e6

input輸入制定輸入數據類型匹配

wid value pri tex logs key 匹配 type style <input type="text" id="price_169" value="97" style="max-width: 50px;" onkeyup="value=value

關於微信手機端IOS系統中input輸入無法輸入的問題

inpu input mil net 手機端 family 輸入 tails 覆蓋 把-webkit-user-select:none改成-webkit-user-select:auto;覆蓋掉或者直接註釋掉就行! 別人家的博文:http://blog.csdn.net

購物車中的input輸入只能輸入數字和輸入為0的時候默認為1

pos put brush pre tex || lac ext html <input type="text" value="1" onkeyup="value=(parseInt((value=value.replace(/\D/g,‘‘))==‘‘||pars

輸入聯想輸入

mar 利用 tel als ant 常常 center oct 分享圖片 筆者,不玩網遊還差4天就兩個月了。我常常覺得,過往的都是不堪回首的,但現在又何嘗不是。有時候,我的腦海裏會浮現一首歌:“早知道是這樣 像夢一場,我才不會把愛都放在同一個地方”。只有一句,來來回回的重

不記錄input輸入之前輸入的資訊

在表單的設計過程中,當我們在瀏覽器表單輸入資訊的時候,input文字框會儲存之前提交的表單資訊,當我們雙擊input文字框時之前輸入的文字就會出現,當然,這僅在某些時候用到,但是這樣會很容易暴露使用者的隱私。要使input表單輸入框不儲存之前輸入過的資訊,有兩種方法可以實現。 方法一:在不想使用快

js控制輸入只能輸入數字不能輸入其他字元

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"

APPium連線真機輸入輸入的內容與程式碼中不一致

今天解決了上一個問題,又碰到了一個新的問題。 問題:連線真機輸入框中輸入的內容與程式碼中不一致。 描述: 想實現登入頁面輸入使用者名稱和密碼自動登入,可是在輸入使用者名稱和密碼的框中輸入的內容總是與程式碼中的不一致,初步感覺到應該和輸入發有關係,於是把使用者名稱和密碼都換成數字可以成功登入,但是真實的使

flutter 底部輸入 聊天輸入 Flexible

想在頁面底部放個輸入框,結果鍵盤一直遮住了,原來是佈局問題   Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("評論"),

在HTML中限制input 輸入只能輸入純數字

限制 input 輸入框只能輸入純數字 1. onkeyup = "value=value.replace(/[^\d]/g,'')" 使用 onkeyup 事件,有 bug ,那就是在中文輸入法狀態下,輸入漢字之後直接回車,會直接輸入字母   2.

input 輸入只能輸入數字長度為2(也可以修改任意長度)

直接放在input標籤裡面 1.input長度為2 oninput="if(value.length>2)value=value.slice(0,2)"  2.控制input輸入數字 on

input輸入只能輸入正整數、字母、小數、漢字

只需將需要的程式碼加入到input輸入框中,即可使用! 1,文字框只能輸入數字程式碼(小數點也不能輸入) 程式碼如下: <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value

js實現input輸入只能輸入數字的功能(完美測試通過)

<input type="text" style="ime-mode:disabled;" onpaste="return false;" onkeypress="keyPress()" /> function keyPress() { var k

限制輸入只能輸入數字

<th class="form_label" width="15%" align="right"  style="border-bottom: 1px;" >                

如何禁用input輸入輸入記錄功能

當我們在瀏覽器中輸入表單資訊的時候,input文字輸入框會記錄下之前輸入過的內容,此後每次只要雙擊input文字輸入框或者輸入一些值時就會出現之前輸入的內容,雖然會覺得比較方便,但有時也會暴露使用者的隱藏資料,或者從需求角度而言這些提示並不需要,那就要把這個提示