输入框的值显示千分位且转大写

牧杉-惊蛰

已于 2024-09-03 16:04:24 修改

阅读量189

点赞数

于 2023-04-27 15:26:04 首次发布

本文链接：https://blog.csdn.net/m0_63026408/article/details/130406921

版权

1：数值转千分位js文件

/*
  *@Author: FangbinGuo
  *@Date:2023-04-20 09:45:26
  *@Description:
  
*/
import { MessageBox, Message } from "element-ui";

export function numberToQianFenWei(value) {
  let ShuZhireg=/^((0{1}\.\d{1,2})|([1-9]\d*\.{1}\d{1,9})|([1-9]+\d*)|0)$/;
  let newValue=""
  if(value.indexOf(",")){
    newValue=value.replace(/\,/g,"");
    // newValue=value.replaceAll(",","");
  }else{
    newValue=value;
  }
  if (!newValue) return ""
  // 获取整数部分
  const intPart = Math.trunc(newValue);
  if(ShuZhireg.test(intPart)){
    // 整数部分处理，增加,
    const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
    // 预定义小数部分
    let floatPart = ''
    // 将数值截取为小数部分和整数部分
    const valueArray = value.toString().split('.')
    if (valueArray.length === 2) { // 有小数部分
      floatPart = valueArray[1].toString() // 取得小数部分
      return intPartFormat + '.' + floatPart
    }
    return intPartFormat + floatPart
  }else{
    Message({
      message: "输入有误，请仔细查看！！！",
      type: "error",
    });
    return value;
  }
  
}

2：数值转大写js文件

/*
  *@Author: FangbinGuo
  *@Date:2023-04-15 12:05:11
  *@Description:
  
*/
// 本次申请金额 转大写
export function ZhuanDaXie(number) {
  let newVal="";
  if(String(number).indexOf(",")){
    newVal=String(number).replace(/\,/g,"");//如果是千分位的话 会有 , 去掉 ,
  }else{
    newVal=number;
  }
  let numberVal=Number(newVal);// 将 传入的值 转换为 数值
  let result = "";
  if(isNaN(numberVal)||numberVal<0){// 如果 传入的 值  不是数值 或者 传入的金额 小于零
    result=""
  } 
  else {
    // 如果 输入的值 非零 非 空
    if (number !== "" && number != null && number !== "0") {
      // 如果 含 小数
      if(String(number).indexOf(".")){
        // 如果 小数部分超过两位
        if(String(newVal).slice(String(newVal).indexOf(".")).length>3){
          result=""
        }else{// 如果 小数部分不超过两位
          result=zhuanHanZi(newVal)
        }
      }else{// 如果不含小数
        result=zhuanHanZi(newVal)
      }
    }else if(number==="0"){
      result="零"
    }else{
      result=""
    }
  }
  return result
} 
// 将 传入的数值 转为 汉字
export function zhuanHanZi(val){
  let hanZi="";
  let unit = "仟佰拾亿仟佰拾万仟佰拾元角分";
  let str = "";
  val += "00";
  const point = val.indexOf(".");
  if (point >= 0) {
    val = val.substring(0, point) + val.substr(point + 1, 2);
  }
  unit = unit.substr(unit.length - val.length);
  for (let i = 0; i < val.length; i++) {
    str +=
      "零壹贰叁肆伍陆柒捌玖".charAt(val.charAt(i)) + unit.charAt(i);
  }
  return hanZi =
    str
      .replace(/零(仟|佰|拾|角)/g, "零")
      .replace(/(零)+/g, "零")
      .replace(/零(万|亿|元)/g, "$1")
      .replace(/(亿)万|(拾)/g, "$1$2")
      .replace(/^元零?|零分/g, "")
      .replace(/元$/g, "元");
      // .replace(/元$/g, "元") + "整";
}

3：表单验证方法

// 校验数值 必填不能为0不能为空
export function JinEKeYiBiTian(rule, value, callback) {
  let SguZhireg=/^((0{1}\.\d{1,2})|([1-9]\d*\.{1}\d{1,2})|([1-9]+\d*)|0)$/;
  if(value==""||value==null||value==0){
    callback(new Error('请输入数值,不能为空或者是零！'));
  }else{
    let newVal="";
    if(String(value).indexOf(",")){
      newVal=value.replace(/\,/g,"");//如果是千分位的数值，去掉里面的 , 后再验证
    }else{
      newVal=value;
    }
    if(!SguZhireg.test(newVal)){
      callback(new Error('请输入最多只有两位小数且为正数的数值！'));
    }
    else if(newVal.toString().indexOf(".")==-1){//如果没有小数点
      if(newVal.toString().length>=13){
        callback(new Error('输入的数不得超过千亿！'))
      }else{
        callback()
      }
    }else if(newVal.toString().indexOf(".")>12){//如果有小数点
      callback(new Error('输入的数不得超过千亿！'))
    }
    else{
      callback()
    }
  }
}

4：使用

<template>
  <div>
    <el-dialog
      :title="shenPiDialogTitle"
      :visible.sync="shenPiDialogShowHiden"
      width="70%"
      :before-close="handleClose"
    >
      <el-form
        :model="shenPiDialogForm"
        ref="shenPiDialogForm"
        :rules="shenPiDialogRule"
        class="demo-ruleForm"
        :label-width="shenPiLabelWidth">
        <el-form-item
          label="付款后累计支付（元）："
          prop="huiXian">
          <el-input
            v-model.trim="shenPiDialogForm.huiXian"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="付款后累计支付大写："
          prop="huiXianDaXie">
          <el-input
            :disabled="true" 
            v-model.trim="shenPiDialogForm.huiXianDaXie"
          ></el-input>
<!--           {{ huiXianDaXie }} -->
        </el-form-item>
<!--         <el-form-item>
          <el-button type="primary" @click="submitForm('shenPiDialogForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('shenPiDialogForm')">取消</el-button>
        </el-form-item> -->
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { baoLiuLiangWeiXiaoShuNotYuan,JinEKeYiBiTian} from "@/utils/toolsObj.js";
import {numberToQianFenWei,} from "@/utils/qianFenWei.js";
import { ZhuanDaXie,} from "@/utils/chineseNumber.js";
export default {
  components: {
    
  },
  props: {
  },
  data () {
    return {
      // 审批弹窗
      shenPiDialogForm: {
        huiXian:"",
        huiXianDaXie:"",
      },
      shenPiDialogRule: {
        huiXian:[
          { required: true, validator:JinEKeYiBiTian, trigger: "blur" },
        ],
      },
    };
  },
  created () {
  },
  watch: {
    'shenPiDialogForm.huiXian':function(newVal,oldVal){
      this.shenPiDialogForm.huiXian=numberToQianFenWei(newVal);
      this.shenPiDialogForm.huiXianDaXie=ZhuanDaXie(newVal)
    },
  },
  created () {
  },
  methods: {
    
  },
};
</script>
<style scoped >
.marginBT15{
  margin: 15px 0;
}
.greenFont{
  color: #4B7902;
}
.redFont{
  color: #DE1F37;
}
</style>