【知识整理】输入框input限制字符格式

输入框只能输入数字

 <vi-input 
	v-model="age"
    onkeyup="value=value.replace(/[^\d]/g,'')"
    onpaste="value=value.replace(/[^\d]/g,'')"
    oncontextmenu="value=value.replace(/[^\d]/g,'')"
></vi-input>

以vue为例，上述代码可以实现输入框只能输入数字。但是在前端开发过程中，我们经常会将input通过v-model绑定一个值，那么就会出现一个问题，即：当输入不是数字的字符时，虽然前端input不给输入，但是这个不是数字的字符确被绑定进上述的age里面了，若这个age值是接口传参的字段的话，就会导致传参有错误，解决方法如下：

 // 监听年龄的变化，只能是数字
  @Watch("age")
  private onChanged(state: any, oldState: any) {
    this.age = state && String(state).replace(/[^\d]/g, "");
  }

上面代码是ts的写法，通过加上对age的监听，监听age只能输入数字，可以解决上面出现的问题。

输入框只能输入汉字、数字、字母和空格

<input 
	type="text" 
	v-model="check.taskName"
	@keyup="keyUpFunc"
	onpaste="value=value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5\s]/g,'')"

private keyUpFunc() {
	this.check.taskName = this.check.taskName.replace(/[^a-zA-Z0-9\u4e00-\u9fa5\s]/g,'').substring(0,40);
 }

上面keyUpFunc函数单独拎出来了，是因为有时在输入汉字的时候，输入法有点问题，会将拼音和汉语都显示出来