前言
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">体积(m3)</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)
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
