首页 > 其他分享 >jQuery对输入框进行验证,只允许输入字母和数字

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

时间:2023-09-23 12:00:47浏览次数:47  
标签:jQuery regex 字母 输入框 inputValue var event

使用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]+$/对输入内容进行验证。 如果输入内容不符合要求(包含非字母和数字的字符,包括中文), 则会将非法字符删除。

标签:jQuery,regex,字母,输入框,inputValue,var,event
From: https://blog.51cto.com/u_15315508/7577352

相关文章

  • Excel_复杂文本字母数字混合排序
     引ADC_DCAL_DN1[13:0]ADC_DCAL_DN10[13:0]ADC_DCAL_DN11[13:0]ADC_DCAL_DN2[13:0]ADC_DCAL_DN3[13:0]ADC1_EOCADC10_EOCADC11_EOCADC2_EOCADC3_EOCADC4_EOCADC5_EOCADC_CALCB1_CALI_ADC[7:0]CB1......
  • js jquery input radio点击事件
     HTML:<inputtype="radio"name="myname"value="1"/>1<inputtype="radio"name="myname"value="2"/>2 jquery代码: //点击事件change$('input[type=radio][name=myname]').ch......
  • Flutter TextField 限制只允许输入数字、小数、字母
    FlutterTextField限制只允许输入数字、小数、字母-flutter教程-IT逐梦人http://www.fc-home.cn/article/57.html【Flutter】五、Flutter之表单输入框——TextField_fluttertextfield验证_MAXLZ的博客-CSDN博客https://blog.csdn.net/qq_33635385/article/details/10004......
  • jQuery 指定区域的内容循环滚动
    需求:页面指定区域内的内容循环滚动,但是内容形式、高度都不固定,是接口从编辑器提取出来的内容。代码:<divid="container5"><divclass="content"id="f12red1">自2023年9月20日24时起,国内汽、<br>柴油价格(标准品,下同)每吨分别提高70元。<br>自202......
  • struts2.1.8.1+jquery1.4.2返回json数据
    1、引入包(本文中的包全部引自struts-2.1.8.1\lib):struts2-json-plugin-2.1.8.1.jarjson-lib-2.1.jarcommons-collections-3.2.jarcommons-beanutils-1.7.0.jarcommons-lang-2.3.jarcommons-logging-1.0.4.jarezmorph-1.0.3.jar这7个包是返回json形式的数据必须的。因为jso......
  • js/jquery 关于select 的一些操作
    1.如何设置默认选中呢设置默认选中可在option中添加selected="selected",具体举例如下:<optionvalue="2"selected="selected">test2</option><selectid="citySel"class="select"><optionvalue="......
  • js_对输入框按下enter键会触发change事件
    测试代码<body><inputtype="text"id="i1"/><script>constoI1=document.querySelector('#i1')oI1.addEventListener('keydown',function(e){console.log(e.key)})oI1.add......
  • KingbaseESV8R6汉字首字母排序
    目的本文目的实现汉字首字母排序。排序规则和字符集的关系如下。selectsys_encoding_to_char(collencoding)asencoding,collname,collcollate,collctypefromsys_collation;按照UTF8字符集匹配中文排序规则如下。selectcollcollatefromsys_collationwheresys_encod......
  • jQuery与Ajax:“特别的”load()方法(筛选文档、传递方法、回调函数)
    “大名鼎鼎的”jQuery因为其极简的引用方式而在N年前备受追捧,而今“浪潮”过去,还剩下什么?我认识jQuery,只是在去年接触ajax时了解,从而感兴趣,进而深入探究(其实也没多深入,只是相关的看了一下)。不得不说,jQuery对ajax支持的四个type:post(一般用于发送)、get(一般常用于接收)、put(修改)、dele......
  • Jquery设置select控件指定text的值为选中项
    北环路天河路清华园路徐寨路朝凤路园田路varstreet=‘清华园路’;(‘#streetidoption:contains(’+street+‘)’).each(function(){if((this).text()==street){$(this).attr(‘selected’,true);}});......