uniapp 输入框兑换码正则验证只能大写字母和数字

最新推荐文章于 2024-05-24 20:59:17 发布

晒黑的小神仙

最新推荐文章于 2024-05-24 20:59:17 发布

阅读量538

点赞数

分类专栏： Vue uni-app 前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_61273407/article/details/125412661

版权

Vue 同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

uni-app

2 篇文章 0 订阅

订阅专栏

这段代码展示了在前端如何实现兑换码输入验证，当用户在输入框失去焦点时，检查输入的兑换码是否由大写字母和数字组成。如果输入不符合规则，将显示错误提示。通过正则表达式进行匹配，并使用uni.showToast展示结果。

摘要由CSDN通过智能技术生成

<input class="CDkey-input" @blur="onKeyInput" v-model="CDkeyValue" type="text" maxlength="12" placeholder="请输入或粘贴兑换码(数字和大写字母组成)" />

data() {
		return {
			CDkeyValue: '',
		};
	},

methods: {
		// 失去焦点兑换码验证
		onKeyInput() {
			console.log(this.CDkeyValue);
			if (this.CDkeyValue != '') {
				this.getCardTypeNumber(this.CDkeyValue);
			}
		},
    // 兑换码正则验证 必须是大写字母和数字组成
		getCardTypeNumber(value) {
			const reg = /^[0-9A-Z]+$/;

			if (!reg.test(value)) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确的兑换码',
					duration: 2000,
					position: 'top',
				});
			} else {
				console.log('兑换码格式正确');
			}
		},
	},