今天在写代码时遇到一些问题,inputtype属性值为number时,maxlength的设置会失效,type属性值为text时,又无法满足input只能输入数字的限制,找到的解决方法如下:

1、只能输入数字和小数点

@keyup="val.num = val.num.replace(/[^\d.]/g,'')"

具体内容:

<form v-for="(val,index) in list" :key='val.id'>
	<input 
	 type = "text"
	 placeholder = "请输入数量"
	 v-model = "val.num"
	 maxlength = "7"
	 @keyup = "val.num = val.num.replace(/[^\d.]/g,'')"
	/>
</form>

2、只能输入一个小数点,当第二位不是'.'时,首位不能为0

2.1 限制一个小数点

val.num= val.num
   .toString().//replace()方法是字符串方法
   .replace(/\.{2,}/g,'.')
   .replace('.','$#$')
   .replace(/\./g,'')
   .replace('$#$','.')//只能输入一个小数点

2.2 首位不能为0

if(val.num.length > 1 && val.num.substr(0,1) ==0 && val.num.substr(1,1) !='.'){
    val.num= val.num.substr(1,1)
}

2.3、首位不为点
方法一:

if(val.num.substr(0,1) == '.'){
    val.num=""
}

方法二:

if(val.num.indexOf(".") <= 0 && val.num!= ''){
   val.num= parseFloat(val.num)
}

2.4、限制小数点的位数(3位为例)

val.num= val.num
   .toString()
   .replace(/^()*(\d+)\.(\.?\d\d\d).*$/,'$2$2.$3')
                           //d有几个就是几位小数
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐