判断输入为正数并且增加千分符

本文介绍了一种使用JavaScript实现的商品价格格式化处理方法。当用户输入商品价格后失去焦点时,该方法会验证并格式化输入的价格,确保其正确性和易读性。如果输入的价格小于零或格式不正确,将提示用户进行修正。
$(function(){
   $(".decimal").on("blur",function(money){
      var discount = $(this).val();
      var total;
      if(discount<=0){
         alert("商品价格不能小于0!")
      }else if(discount!==''&&!isNaN(discount)){
         total = parseFloat(discount);
         total = total.toFixed(2) + "";
         var re=/(\d{1,3})(?=(\d{3})+(?:$|\.))/g;
         var n=total.replace(re,"$1,");
         return  $(this).val(n);
      }else{
         alert("请输入正确的价格!");
         return false;
      }
});
<template> <el-input v-model="displayValue" @input="handleInput" @blur="formatDisplayValue" @focus="resetDisplayValue" placeholder="" :maxlength="displayValue.toString().includes('.')?21:18" /> </template> <script> import { ref, watch } from 'vue'; export default { props: { modelValue: { type: String, default: '' } }, emits: ['update:modelValue'], setup(props, { emit }) { // 显示值(带千分的字串) const displayValue = ref('') // 实际存储的数值(数字类型) const numericValue = ref(props.modelValue) // 初始化格式 const initFormat = () => { displayValue.value = formatNumber(numericValue.value) } // 数值格式化函数(添加千分) const formatNumber = (num) => { // return num.toLocaleString('en-US', { // minimumFractionDigits: 2, // maximumFractionDigits: 2 // }) //return num.toLocaleString('en-US', {}) //return num?.toString()?.replace(/(\d)(?=(\d{3})+\.)/g, '$1,') // 处理带小数点的数字 if (num.toString().includes('.')) { const [integerPart, decimalPart] = num.split('.'); return `${integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}.${decimalPart}`; } // 处理整数 return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')+'.00'; } // 输入处理函数 const handleInput = (value) => { // 1. 移除非数字和小数点 let filtered = value.replace(/[^\d.]/g, '') // 2. 处理多个小数点的情况 const dotCount = (filtered.match(/\./g) || []).length if (dotCount > 1) { const firstDotIndex = filtered.indexOf('.') filtered = filtered.substring(0, firstDotIndex + 1) + filtered.substring(firstDotIndex + 1).replace(/\./g, '') } // 3. 限制小数点后最多两位 const dotIndex = filtered.indexOf('.') if (dotIndex !== -1 && filtered.length - dotIndex > 3) { filtered = filtered.substring(0, dotIndex + 3) } // 小数点前的数字不能超过18位 if (dotIndex !== -1 && dotIndex > 18) { filtered = filtered.substring(0, 18)+filtered.substring(dotIndex, filtered.toString().length) } // 4. 更新显示值 displayValue.value = filtered // 5. 更新实际数值(转换为数字) //numericValue.value = parseFloat(filtered || 0) || 0 numericValue.value = filtered || 0 emit('update:modelValue', numericValue.value) } // 失去焦点时格式化显示 const formatDisplayValue = () => { // 确保数值有效 //const num = isNaN(numericValue.value) ? numericValue.value : numericValue.value // numericValue.value = parseFloat(num.toFixed(2)) //numericValue.value = num // 添加千分 displayValue.value = formatNumber(numericValue.value) emit('update:modelValue', numericValue.value) } // 获得焦点时移除千分 const resetDisplayValue = () => { displayValue.value = numericValue?.value?.toString() } // 监听外部传入值的变化 watch(() => props.modelValue, (newVal) => { if (newVal !== numericValue.value) { numericValue.value = newVal displayValue.value = formatNumber(newVal) } }) initFormat() return { displayValue, handleInput, formatDisplayValue, resetDisplayValue } } } </script>
最新发布
11-15
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值