【VUE】input正则

正整数

oninput="value=value.replace(/[^\d]/g,'')"

在el-input中添加onkeyup使用中文输入法导致验证失效

当输入为非数字时会被""替换掉,但是使用中文输入法时,虽然也能过滤非数字,但是过滤之后表单的非空验证不通过 

        应为:

@input ="value => form.ziduanming=value.replace(/[^0-9.]/g,'')",

正数-保留两位小数

oninput="this.value= this.value.match(/\d{0,9}(\.\d{0,2})?/) ? this.value.match(/\d{0,9}(\.\d{0,2})?/)[0] : ''"

正负整数

onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');"

不能输入空格

onKeypress="javascript:if(event.keyCode== 32)event.returnValue = false;"

小于等于100的整数

oninput="value=value.replace(/[^\d]/g,'');if(value>100)value=100"/

可输入的位数(length)

例如 64位以内的

onkeyup="this.value= this.value.match(/^.{0,64}/) ? this.value.match(/^.{0,64}/) : ''"

正数,保留两位小数

-----------------------------------------start-----------------------------------------

<el-input
	v-model="form.xxx"
	clearable
	type="number"
    @keydown.native="limitInputValue"
	oninput="if(isNaN(value)) { value = parseFloat(value) }
             if(value < 0) { value = 0 }
             if(value.indexOf('.') == -1 && value.length > 6) { value = value.slice(0,6) } 
             if(value.indexOf('.') >= 6) { value = value.slice(0,6) + value.slice(value.indexOf('.'),value.indexOf('.') + 3) }
             if(value.indexOf('.') > -1 && value.indexOf('.') <= 6) { value=value.slice(0,value.indexOf('.')) + value.slice(value.indexOf('.'),value.indexOf('.') + 3) } 
             if(value.indexOf('0') == 0 && value.indexOf('.') !== -1) { value=value.slice(0) }
             if(value.indexOf('0') == 0 && value.indexOf('.') === -1 && value.length > 1) { value=value.slice(1) }"
/>

输入框类型为‘number’时,输入框是可以输入 + - e 需要屏蔽这些内容

		limitInputValue(e) {
			let key = e.key;
			if (
				key === 'e' ||
				key === 'E' ||
				key == '+' ||
				key === '-'
			) {
				e.returnValue = false;
				return false;
			}
			return true;
		},

因为type设置为number,输入框旁边会出现箭头,需要在css里隐藏侧边箭头,并且输入法为中文时,输入后光标会上移错误,需要调整

//隐藏输入框右侧向上向下箭头
input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
}

input::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
}

input[type='number'] {
	-moz-appearance: textfield;
}

//输入法为中文状态下光标错位
.el-input__inner {
	line-height: 1px !important;
}

-----------------------------------------end-----------------------------------------

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中,我们可以通过给`<input>`标签的`v-model`绑定的属性使用正则表达式来限制用户输入的内容。如果我们希望输入框不能输入空格,我们可以在`<input>`标签上通过`@input`事件监听用户的输入,并且在该事件的处理函数中对输入的值进行正则验证。 首先,在Vue的模板中,我们需要一个`<input>`标签,并将它的值绑定到一个data中的属性上,以便在后续的处理函数中使用。 ```html <template> <input v-model="inputValue" @input="handleInput"> </template> ``` 接下来,在Vue的script部分,我们需要定义一个data属性`inputValue`,并且在`handleInput`方法中进行正则验证。判断用户输入的值是否包含了空格,如果包含空格,则将输入值修改为去掉空格的值。 ```javascript <script> export default { data() { return { inputValue: '', // 绑定的输入框的值 }; }, methods: { handleInput() { this.inputValue = this.inputValue.replace(/\s/g, ''); // 去掉输入值中的空格 }, }, }; </script> ``` 这样,当用户在输入框中输入或粘贴含有空格的内容时,空格会被自动去掉,达到了不能输入空格的效果。 注意,在上述示例代码中,我们使用了正则表达式`/\s/g`来匹配空格,其中`\s`表示匹配任意空白字符,`g`表示全局匹配。这样,当用户输入多个空格时,所有的空格都会被去除。 以上就是使用Vue实现输入框不能输入空格的方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值