uniapp input 输入框限制只能输入数字和字母

uniapp yekong

uniapp input 输入框限制只能输入数字和字母

使用组件

<inputFilter :value.sync="data.IDCardNum"></inputFilter>

组件代码

/**
* @Author: 858834013@qq.com
* @Name: inputFilter
* @Date: 2022-07-20
* @Desc: 输入框过滤器 只能输入字母和数字
*/
<template>
	<input @input="replaceInput" @confirm="replaceInput" v-model="value2" type="text" placeholder="请填写" placeholder-style="font-size:32rpx;color: #D5D5E0;" />
</template>

<script>
	export default {
		data() {
			return {
				value2: ''
			}
		},
		props: {
			value: {
				type: String,
				default () {
					return '';
				}
			},
		},
		watch: {
			value2() {
				console.log(this.value2)
				this.getInput()
			},
			value() {
				this.value2 = this.value
			},
		},
		mounted() {
			this.value2 = this.value
		},
		methods: {
			replaceInput: function(event) {
				var that = this;
				setTimeout(() => {
					that.$emit("update:value", event.target.value.replace(/[^0-9a-zA-Z]/g, ''));
					that.value2 = event.target.value.replace(/[^0-9a-zA-Z]/g, '')
				}, 10)
			},
			getInput() {
				var that = this;
				setTimeout(() => {
					that.$emit("update:value", that.value2.replace(/[^0-9a-zA-Z]/g, ''));
				}, 10)
			}
		}
	}
</script>
喜欢