博客

uniapp u-View 的输入框，怎么做输入变化，变成两位小数，然后设置输入最小值和输入最大值、整数、不给输符号等

  • Post author:
  • Post category:uniapp

前言

uniapp u-View 的输入框，怎么做输入变化，输入两位小数，然后设置输入最小值和输入最大值、整数、不给输符号等

这里是指，我设置这个输入框是输入小数的，然后用户输了整数，我就要输入框自己变成 整数.00的形式。

再比如我设置了最大值和最小值，用户输入的不是这个范围，输入框就会自动变化成最小值，或者最大值

再比如我设置了不给输入符号，用户输入符号了，输入框就会自动变化成把符号去掉的字符串

所以这个不是uview的表单验证，只是提示用户输入不规范信息。

 效果

解决

一通百通，就不写那么多了，如果你有好的做法，或者认识好的组件，你就评论告诉我哈，谢谢啦

思路：

1、如果想要输入整数、小数，input 组件自带的type就能够满足，type=digit，键盘是带有小数点的数字键盘，type=number，键盘是不带有小数点的数字键盘。

2、如果产品设计需要限制输入的字数，input 组件自带maxlength，限制输入多个字

3、但是产品需要只能输入字母和数字，不可以输入中文，不可以输入符号，这时候，我们可以监听input事件，然后效果是：用户只要输入了不符合条件的符号，就会被删掉，实现代码：

value = value.replace(/[^0-9A-Za-z]/g, '')

4、整数的，产品需要设置最小值和最大值，我们可以监听blur事件（输入框失去焦点），然后把值转成Number类型，再去判断最大值和最小值，实现代码：

let newVal = value === undefined ? value : Number(value);
if (newVal !== undefined) {
    if (isNaN(newVal)) {
          newVal = min
    }
    if (newVal >= max) newVal = max;
    if (newVal <= min) newVal = min;
}
value = newVal;

5、小数的，产品需要设置最小值和最大值，并且还要把用户输入的整数改成x.00形式，如果用户故意输入x…..xxx形式的（键盘是带小数点的数字键盘），就换成最小值，也是监听blur事件（输入框失去焦点），然后把值转成Number类型，再去判断最大值和最小值，最后设置数值的精度，想要几位小数就弄几位小数，实现代码：

（本来想着先用正则去校验是不是两位小数的，后面发现，用Number就可以把字符串转成数字，这个更符合要求，只要转不了数字的，那就是用户瞎输入了字符，那就直接把数值设成默认值或者最小值就好了）

let newVal = value === undefined ? value : Number(value);
if (newVal !== undefined) {
	if (isNaN(newVal)) {
			newVal = min
	}
    if (newVal >= max) newVal = max;
    if (newVal <= min) newVal = min;
}
// 数值精度
newVal = this.toPrecision(newVal, 2)
value = newVal;
// 设置数值精度
toPrecision(num, precision) {
				if (precision === undefined) precision = 2;
				return parseFloat(Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision)).toFixed(2);
			},

以上是用失去焦点事件完成（移动端输入格式化 监听失去焦点事件）

但也可以限制用户的输入，用输入事件（这个是写PC端用elementUI时遇到了，补充在这里，当个参考）（PC端输入格式化 监听输入事件、或失去焦点事件）

首先只能输入为形如小数的字符串 –> n位整数、n位整数. 、n位整数.2位整数，然后根据存不存在小数点，补全小数点后的位置 –> .00 、.X0 

oninput="value = value.replace(/[^\d^\.]+/g, '').replace(/^0+(\d)/, '$1').replace(/^\./, '0.').match(/^\d*(\.?\d{0,2})/g)[0] || ''"
<el-input v-model="form.rentArea" placeholder="请输入签约面积" maxlength="10" clearable @blur="onDecimalBlur" oninput="value = value.replace(/[^\d^\.]+/g, '').replace(/^0+(\d)/, '$1').replace(/^\./, '0.').match(/^\d*(\.?\d{0,2})/g)[0] || ''"></el-input>

onDecimalBlur(event) {
                // console.log(event.target.value)
                let value = event.target.value
                // 有小数点的情况下补全小数点后面
                console.log(/^\d+\.+$/g.test(value))
                event.target.value = value.replace(/^\d+\.+$/g,"$&" + "00").replace(/^\d+\.+\d$/g,"$&" + "0")
			},

6、因为uniapp使用 Vue.js，所以我们在监听input和blur的事件，把用户输入的值进行了修改，发现console.log打印发现值已经修改了，但是页面展示没有发生变化，因为受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除，我们可以异步修改，利用this.$nextTick

this.$nextTick(() => {
	this.dataForm.skuList[0][data] = value
})

例子

				<view class="v-category">
					<view style="display:flex;">
						<view style="color: red;margin-right: 12rpx;">*</view>
						<view class="v-category-title">销售价</view>
					</view>
					<view class="v-category-content">
						<u-input style="width: 100%;" type="digit" v-model="dataForm.skuList[0].priceFee"
							@blur="onInput($event,3,'priceFee')" placeholder="请输入销售价" maxlength="15" />
					</view>
				</view>
				<view class="v-category">
					<view style="display:flex;">
						<view style="color: red;margin-right: 12rpx;">*</view>
						<view class="v-category-title">市场价</view>
					</view>
					<view class="v-category-content">
						<u-input style="width: 100%;" type="digit" v-model="dataForm.skuList[0].marketPriceFee"
							@blur="onInput($event,4,'marketPriceFee')" placeholder="请输入市场价" maxlength="15" />
					</view>
				</view>
				<view class="v-category">
					<view style="display:flex;">
						<view style="color: red;margin-right: 12rpx;">*</view>
						<view class="v-category-title">库存</view>
					</view>
					<view class="v-category-content">
						<u-input style="width: 100%;" type="number" v-model="dataForm.skuList[0].stockIntVal"
							@blur="onInput($event,2,'stockIntVal')" placeholder="请输入库存" maxlength="7" />
					</view>
				</view>
				<view class="v-category">
					<view style="display:flex;">
						<view style="color: red;margin-right: 12rpx;">*</view>
						<view class="v-category-title">体积(m³)</view>
					</view>
					<view class="v-category-content">
						<u-input style="width: 100%;" type="digit" v-model="dataForm.skuList[0].volume"
							@blur="onInput($event,5,'volume')" placeholder="请输入体积" maxlength="10" />
					</view>
				</view>
				<view class="v-category">
					<view style="display:flex;">
						<view style="color: red;margin-right: 12rpx;">*</view>
						<view class="v-category-title">重量(kg)</view>
					</view>
					<view class="v-category-content">
						<u-input style="width: 100%;" type="digit" @blur="onInput($event,6,'weight')"
							v-model="dataForm.skuList[0].weight" placeholder="请输入重量" maxlength="10" />
					</view>
				</view>
				<view class="v-category">
					<view style="display:flex;">
						<view style="color: #FFFFFF;margin-right: 12rpx;">*</view>
						<view class="v-category-title">商品条码</view>
					</view>
					<view class="v-category-content">
						<u-input style="width: 100%; margin-right: 20rpx;" @input="onInput($event,0,'modelId')"
							v-model="dataForm.skuList[0].modelId" placeholder="请输入商品条码" maxlength="20" />
						<u-icon name="scan" color="#FE3F68" size="35" @click="handleScan"></u-icon>
					</view>
				</view>
				<view class="v-category">
					<view style="display:flex;">
						<view style="color: #FFFFFF;margin-right: 12rpx;">*</view>
						<view class="v-category-title">商品编码</view>
					</view>
					<view class="v-category-content">
						<u-input style="width: 100%;" @input="onInput($event,0,'partyCode')"
							v-model="dataForm.skuList[0].partyCode" placeholder="请输入商品编码" maxlength="20" />
					</view>
				</view>
data() {
			return {

				inputType: [{
					id: 0,
					name: '数字和字母',
					reg: /[^0-9A-Za-z]/g
				}, {
					id: 1,
					name: '数字',
					reg: /[^0-9]/g
				}, {
					id: 2,
					name: '库存',
					min: 0,
					max: 9999999,
					reg: /\D/g
				}, {
					id: 3,
					name: '销售价',
					min: 0.01,
					max: 9999999.99,
					reg: /[^0-9.]/g
				}, {
					id: 4,
					name: '市场价',
					min: 0.00,
					max: 9999999.99,
					reg: /[^0-9.]/g
				}, {
					id: 5,
					name: '体积',
					min: 0.00,
					max: 999.99,
					reg: '^([1-9][0-9]*)+(.[0-9]{1,2})?$'
				}, {
					id: 6,
					name: '重量',
					min: 0.00,
					max: 9999.99,
					reg: '^([1-9][0-9]*)+(.[0-9]{1,2})?$'
				}],
        }
    }
onInput(event, type, data) {
				let value = event
				if (type < 2) {
					let reg = new RegExp(this.inputType[type].reg)
					value = event.replace(this.inputType[type].reg, '')
				} else if (type == 2) {
					let newVal = value === undefined ? value : Number(value);
					let min = this.inputType[type].min
					let max = this.inputType[type].max
					if (newVal !== undefined) {
						if (isNaN(newVal)) {
							newVal = min
						}
						if (newVal >= max) newVal = max;
						if (newVal <= min) newVal = min;
					}
					value = newVal;
				} else {
					let newVal = value === undefined ? value : Number(value);
					let min = this.inputType[type].min
					let max = this.inputType[type].max
					if (newVal !== undefined) {
						if (isNaN(newVal)) {
							newVal = min
						}
						if (newVal >= max) newVal = max;
						if (newVal <= min) newVal = min;
					}
					// 数值精度
					newVal = this.toPrecision(newVal, 2)
					value = newVal;
				}
				this.$nextTick(() => {
					this.dataForm.skuList[0][data] = value
				})
			},

// 设置数值精度
toPrecision(num, precision) {
				if (precision === undefined) precision = 2;
				return parseFloat(Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision)).toFixed(2);
			},

最后，要和后台交互时，指定long类型，int类型，我们前端要转一下参数

dataForm.skuList[0].stock = parseInt(dataForm.skuList[0].stockIntVal)
dataForm.skuList[0].priceFee = parseFloat(dataForm.skuList[0].priceFee)
版权声明：本文为weixin_43991241原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。