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>