jQuery对输入框进行验证，只允许输入字母和数字

原创

祈澈菇凉 2023-09-23 11:54:12 ©著作权

文章标签 输入框 html jquery 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者祈澈菇凉的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用jQuery来对这两个输入框进行验证，确保只允许输入字母和数字，不允许输入中文字符。以下是相应的示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		
	</head>
	<body>
		<input type="text" class="form-control" placeholder="定位手环、卡片编号" id="deviceId" />
		<input type="text" class="form-control" placeholder="请输入NFC编号" id="nfcId" />

		<script>
			$(document).ready(function() {
				// NFC编号输入框验证
				$("#nfcId").on("input", function(event) {
					var inputValue = event.target.value;
					var regex = /^[a-zA-Z0-9]+$/; // 只允许字母和数字

					if (!regex.test(inputValue)) {
						event.target.value = inputValue.replace(/[^\w]/g, ''); // 删除非字母和数字的字符
					}
				});

				// 终端编号输入框验证
				$("#deviceId").on("input", function(event) {
					var inputValue = event.target.value;
					var regex = /^[a-zA-Z0-9]+$/; // 只允许字母和数字

					if (!regex.test(inputValue)) {
						event.target.value = inputValue.replace(/[^\w]/g, ''); // 删除非字母和数字的字符
					}
				});
			});
		</script>
	</body>
</html>

用$(document).ready()来在文档加载完成后执行代码。分别选择了ID为nfcId和deviceId的输入框，并绑定了input事件监听器。当用户输入内容时，会使用正则表达式/^[a-zA-Z0-9]+$/对输入内容进行验证。如果输入内容不符合要求（包含非字母和数字的字符，包括中文），则会将非法字符删除。