element-ui实现input输入框金额数字添加千分位组件

逃离我推掉我的手 2022-10-23 11:25 521阅读 0赞

创建一个amountFormat.js

const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
    
    // 金额添加千分位
    const comdify = function (n) {
        if(!n) return n;
        let str = n.split('.');
        let re = /\d{1,3}(?=(\d{3})+$)/g;
        let n1 = str[0].replace(re, "$&,");
        return str.length > 1 && str[1] ? `${n1}.${str[1]}` : `${n1}.00`;
    };
    //去除千分位中的‘，’
    const delcommafy = function (num){
        if(!num) return num;
        num = num.toString();
        num = num.replace(/,/gi, '');
        return num;
    };
    const valdateFn = function (rule,val,cb) {
        setTimeout(() => {
            if(val) {
                let inputVal = delcommafy(val);
                if (rule.test(inputVal)) {
                    cb()
                } else {
                    cb('只能是数字金额,最多两位小数')
                }
            }
            cb()
        })
    }
    // 验证金额数字可以为负数
    const moneyValid = function (rule,val,cb) {
        valdateFn(/((^-?[1-9]\d*)|^-?0)(\.\d{0,2}){0,1}$/,val,cb);
    };
    // 验证金额数字不可以为负数
    const moneyNValid = function (rule,val,cb) {
        valdateFn(MoneyTest,val,cb);
    };
    
    // 获取输入框的值
    // const getInputValue = function (el) {
    //     let inputVal = el.target.value || '';
    //     return comdify(delcommafy(inputVal));
    // };
    
    // 获取输入框的值
    export const getInputValue =  (el) =>{
        let inputVal = el.target.value || '';
        return comdify(delcommafy(inputVal));
    };

vue页面中的使用

> import \{ getInputValue \} from "@/utils/amountFormat.js";
> 
>     template中：
>      <el-input
>                   style="width: 220px"
>                   placeholder="请输入注册资本"
>                   v-model.number="formData.registCaptial"
>                   @blur="inputMoneyFomet($event, 'registCaptial')"
>                   clearable
>                   :disabled="detailFlag === 1 ? true : false"
>                 ></el-input>
>     
>     javascipet中：
>     inputMoneyFomet(el, name) {
>           this.formData[name] = getInputValue(el);
>         },
> 
>

发表评论取消回复

表情：

评论列表（有 0 条评论，521人围观）

还没有评论，来说两句吧...

相关阅读

相关 ElementUI input只允许输入数字和两位小数

一、概述 ElementUI 官方给的demo，里面有验证数字的，但是没有小数点的校验。二、代码实现页面效果 ![6aa490e301fcbf8cb65

深碍√TFBOYSˉ_/ 2022年10月28日 10:20/ 0 赞/ 350 阅读

相关 element-ui实现input输入框金额数字添加千分位组件

创建一个amountFormat.js const MoneyTest = /((^[1-9]\d)|^0)(\.\d{0,2}){0,1}$/;

逃离我推掉我的手/ 2022年10月23日 11:25/ 0 赞/ 522 阅读

相关 vue js对input输入数字后两位(金额输入框)

js控制input框只能输入数字和一位小数点和小数点后面两位小数 html代码 <input id="money" type="number" step="1"

矫情吗；*/ 2022年10月22日 07:40/ 0 赞/ 352 阅读

相关给数字添加千分位和金额的表示方法

在显示金额等类似的数据时，需要给千分位加个逗号分割，以下是参考代码和运行结果： // 千分位 var regThousands = /(\d)(?=(\d{3

小灰灰/ 2022年10月11日 01:11/ 0 赞/ 224 阅读

相关控制input框输入数字

1.只能输入正整数 <input type="text" οnkeyup="if(this.value.length==1){this.value=this.val

男娘i/ 2022年05月25日 07:21/ 0 赞/ 323 阅读

相关 Vue.js实现数字输入框组件

![70][] index.html <!DOCTYPE html> <html> <head> <meta charse

迷南。/ 2022年05月12日 02:30/ 0 赞/ 202 阅读

相关 js和jsp中实现金额三位分隔，千分位展示

一、js简单的正则方式（不推荐，复杂繁琐）： <html> <body> <script type="text/javascript"> va

太过爱你忘了你带给我的痛/ 2022年02月15日 00:53/ 0 赞/ 281 阅读

相关 input输入框只能输入数字

<input type="number" class="input-control input-l" id="oldcard" oninput = "value=val

骑猪看日落/ 2022年02月01日 13:09/ 0 赞/ 416 阅读

相关金额千分位

function formatAmount(amount) { amount = amount.toString(10).split('.');

秒速五厘米/ 2021年12月23日 02:47/ 0 赞/ 294 阅读

相关对位拆分数字金额

效果图： <table> <tbody> <tr> <td>亿</td> <td>仟</td> <td>佰</td> <td>拾</

- 日理万妓/ 2021年10月01日 06:06/ 0 赞/ 290 阅读