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

创建一个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);
    },

 

已标记关键词 清除标记
相关推荐
<p> <b><span style="font-size:14px;"></span><span style="font-size:14px;background-color:#FFE500;">【Java面试宝典】</span></b><br /> <span style="font-size:14px;">1、68讲视频课,500道大厂Java常见面试题+100个Java面试技巧与答题公式+10万字核心知识解析+授课老师1对1面试指导+无限次回放</span><br /> <span style="font-size:14px;">2、这门课程基于胡书敏老师8年Java面试经验,调研近百家互联网公司及面试官的问题打造而成,从筛选简历和面试官角度,给出能帮助候选人能面试成功的面试技巧。</span><br /> <span style="font-size:14px;">3、通过学习这门课程,你能系统掌握Java核心、数据库、Java框架、布式组件、Java简历准备、面试实战技巧等面试必考知识点。</span><br /> <span style="font-size:14px;">4、知识点+项目经验案例,每一个都能做为面试的作品展现。</span><br /> <span style="font-size:14px;">5、本课程已经在线下的培训课程中经过实际检验,老师每次培训结束后,都能帮助同学们运用面试技巧,成功找到更好的工作。</span><br /> <br /> <span style="font-size:14px;background-color:#FFE500;"><b>【超人气讲师】</b></span><br /> <span style="font-size:14px;">胡书敏 | 10年大厂工作经验,8年Java面试官经验,5年线下Java职业培训经验,5年架构师经验</span><br /> <br /> <span style="font-size:14px;background-color:#FFE500;"><b>【报名须知】</b></span><br /> <span style="font-size:14px;">上课模式是什么?</span><br /> <span style="font-size:14px;">课程采取录播模式,课程永久有效,可无限次观看</span><br /> <span style="font-size:14px;">课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化</span><br /> <br /> <br /> <span style="font-size:14px;background-color:#FFE500;"><strong>如何开始学习?</strong></span><br /> <span style="font-size:14px;">PC端:报名成功后可以直接进入课程学习</span><br /> <span style="font-size:14px;">移动端:<span style="font-family:Helvetica;font-size:14px;background-color:#FFFFFF;">CSDN 学院APP(注意不是CSDN APP哦)</span></span> </p>
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页