uniapp，微信小程序input正则校验只能输入为数字和小数点位数限制

本文链接：https://blog.csdn.net/qq_37880968/article/details/123085650

此博客介绍了如何在微信小程序中使用正则表达式限制input输入，确保用户只能输入数字和一位小数，且首位不能为小数点。通过util.js工具类中的checkNum函数进行校验，并在页面的input组件中调用该函数，实现了输入格式的实时控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序input正则校验只能输入为数字和小数点位数限制

工具类util.js

function checkNum(e) {
	let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
	if (!val) {
		return ''
	}
	var reg = /[^\d.]/g
	// 只能是数字和小数点，不能是其他输入
	val = val.replace(reg, "")
	// // 保证第一位只能是数字，不能是点
	val = val.replace(/^\./g, "");
	// // 小数只能出现1位
	val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
	// // 小数点后面保留2位
	val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
	console.log(val);
	return val
}
module.exports = {
	checkNum
}

页面引入util.js

<template>
	<view class="form_wrap">
		<view>
		<view class="item_box">
		  <text class="item_tit">药剂（支）</text>
		  <input type="number" v-model="formParams.dosage" @input="checkNum($event)"  class="input" placeholder="请输入药剂"/>
		</view>
	</view>
	</view>
</template>

<script>
import Util from 'common/util.js';
export default {
  components: {},
  data() {
    return {
      formParams: {
        dosage: '',
      }
    }
  },
  onShow() {
  },

  methods: {
    checkNum (e) {
      this.$nextTick(() => {
        this.formParams.dosage = Util.checkNum(e)
      })
    },
  }
}
</script>

<style>
	.time_box{
		background: #F4F4F4;
		color: #888888;
		height: 80rpx;
		line-height: 80rpx;
		margin: 0 -30rpx 30rpx -30rpx;
		padding: 0 20rpx;
	}
	.submit_btn{
		background: #3E78ED;
		color: #fff;
		border-radius: 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		/* width: 75%; */
		text-align: center;
		font-size: 32rpx;
		margin: 160rpx auto 0;
	}
	.form_wrap{
		padding:0 30rpx 30rpx 30rpx;
		box-sizing: border-box;
	}
	.input {
		padding-left: 30rpx;
		color: #000;
		height: 100%;
		flex: 1;
	}
	.item_tit {
		font-size: 32rpx;
		margin-left: 36rpx;
		color: #333;
	}
	.item_box {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ddd;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 30rpx;
	}
</style>