用JQuery代码实现文本框强制验证功能

最新推荐文章于 2022-06-10 17:21:06 发布

安冬的码畜日常

最新推荐文章于 2022-06-10 17:21:06 发布

阅读量3.2k

点赞数

分类专栏： JQuery学习 Java学习文章标签： jquery 强制验证验证 focus 失焦点

本文链接：https://blog.csdn.net/frgod/article/details/53009943

版权

Java学习同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

JQuery学习

1 篇文章 0 订阅

订阅专栏

【功能描述】

“不合法不准走”：有4个文本框，一旦选中其中任意一个，则必须在输入不全为空格的有效内容（合法）后，焦点才可以落到其他位置，否则不让失去焦点（不准走）！

【思路分析】

　　显然，当前文本框之所以能得到焦点，也必然是通过了上一次验证的结果。该问题有两个关键点：
　　　1、每次验证只能激活“焦点所在文本框”的blur失焦点事件；该事件在其他文本框不能执行、或执行到验证代码前被中断；
　　　2、必须在当前验证合法后，其他文本框才能获得焦点。
　　因此，可以引入一个全局变量status，用于存放验证结果：对于n个文本框，一旦某次验证通过，则统一设置为特征值PASS；否则，如果在第i个文本框未通过，status就赋值为该文本框对应的特征值FAIL(i)（i=1,2,3,...,n）。

【代码实现】

JQuery部分：（全局变量为flag，取值范围：0,1,2,3,4）

<script type="text/javascript">
$(function(){
	var flag = 0;
 	$("#txt1").blur(function(){
		if(flag!=0 && flag!=1 ) return;
		if($.trim($("#txt1").val())==""){
			flag = 1;
			$("#msg1").html("1中不能为空！");
			$("#txt1").focus();
			return;
		}else{
			flag = 0;
		}
	});
	$("#txt2").blur(function(){
		if(flag!=0 && flag!=2 ) return;
		if($.trim($("#txt2").val())==""){
			flag = 2;
			$("#msg2").html("2中不能为空！");
			$("#txt2").focus();
			return;
		}else{
			flag = 0;
		}
	});	
	$("#txt3").blur(function(){
		if(flag!=0 && flag!=3 ) return;
		if($.trim($("#txt3").val())==""){
			flag = 3;
			$("#msg3").html("3中不能为空！");
			$("#txt3").focus();
			return;
		}else{
			flag = 0;
		}
	});	
	$("#txt4").blur(function(){
		if( flag!=0 && flag!=4 ) return;
		if( $.trim($("#txt4").val())=="" ){
			flag = 4;
			$("#msg4").html("4中不能为空！");
			$("#txt4").focus();
			return;
		}else{
			flag = 0;
		}
	});

	//优化后代码：
	$(".e").each(function(index, element) {
        $(this).change(function(){
			$(".f").html("");
    	});
    });
});
</script>

JSP页面正文部分：

<body>
	<p>1:<input type="text" id="txt1" class="e"><span id="msg1" class="f"></span> </p>
	<p>2:<input type="text" id="txt2" class="e"><span id="msg2" class="f"></span> </p>
	<p>3:<input type="text" id="txt3" class="e"><span id="msg3" class="f"></span> </p>
	<p>4:<input type="text" id="txt4" class="e"><span id="msg4" class="f"></span> </p>
</body>

【运行结果】

强制验证的运行效果

【其他问题】

　　测试发现，该页面在FireFox上执行focus()无响应，解决办法是，先用select()选中该对象，再用计时器setTimeout包裹文本框的focus()，时间设为0：

<script type="text/javascript">
$(function(){
	var flag = 0;<span style="white-space:pre">	</span>//全局变量，用于接收验证结果特征值
	
 	$("#txt1").blur(function(){
		if(flag!=0 && flag!=1 ) return;<span style="white-space:pre">	</span>//上一次在其他字段未通过验证，或在当前字段验证通过的情况下，不执行后面的验证代码
		if($.trim($("#txt1").val())==""){
			flag = 1;
			$("#msg1").html("1中不能为空！");
			$("#txt1").select();
			window.setTimeout(function(){
				$("#txt1").focus();
			},0);
			return;
		}else{
			flag = 0;
		}
	});
	$("#txt2").blur(function(){
		if(flag!=0 && flag!=2 ) return;
		if($.trim($("#txt2").val())==""){
			flag = 2;
			$("#msg2").html("2中不能为空！");
			$("#txt2").select();
			window.setTimeout(function(){
				$("#txt2").focus();
			},0);
			return;
		}else{
			flag = 0;
		}
	});	
	$("#txt3").blur(function(){
		if(flag!=0 && flag!=3 ) return;
		if($.trim($("#txt3").val())==""){
			flag = 3;
			$("#msg3").html("3中不能为空！");
			$("#txt3").select();
			window.setTimeout(function(){
				$("#txt3").focus();
			},0);
			return;
		}else{
			flag = 0;
		}
	});	
	$("#txt4").blur(function(){
		if( flag!=0 && flag!=4 ) return;
		if( $.trim($("#txt4").val())=="" ){
			flag = 4;
			$("#msg4").html("4中不能为空！");
			$("#txt4").select();
			window.setTimeout(function(){
				$("#txt4").focus();
			},0);
			return;
		}else{
			flag = 0;
		}
	});

	//重置提示信息栏：
	$(".e").each(function(index, element) {
        $(this).change(function(){
			$(".f").html("");
    	});
    });
});
</script>

或者直接用js语句：document.getElementById("txt1").focus();，这样可以省去select()语句：

<script type="text/javascript">
$(function(){
	var flag = 0;
 	$("#txt1").blur(function(){
		if(flag!=0 && flag!=1 ) return;
		if($.trim($("#txt1").val())==""){
			flag = 1;
			$("#msg1").html("1中不能为空！");
			window.setTimeout(
				function(){
					document.getElementById("txt1").focus();
				},
				0
			);
			return;
		}else{
			flag = 0;
		}
	});
	$("#txt2").blur(function(){
		if(flag!=0 && flag!=2 ) return;
		if($.trim($("#txt2").val())==""){
			flag = 2;
			$("#msg2").html("2中不能为空！");
			window.setTimeout(
				function(){
					document.getElementById("txt2").focus();
				}
				,0
			);
			return;
		}else{
			flag = 0;
		}
	});	
	$("#txt3").blur(function(){
		if(flag!=0 && flag!=3 ) return;
		if($.trim($("#txt3").val())==""){
			flag = 3;
			$("#msg3").html("3中不能为空！");
			window.setTimeout(
				function(){
					document.getElementById("txt3").focus();
				}
				,0
			);
			return;
		}else{
			flag = 0;
		}
	});	
	$("#txt4").blur(function(){
		if( flag!=0 && flag!=4 ) return;
		if( $.trim($("#txt4").val())=="" ){
			flag = 4;
			$("#msg4").html("4中不能为空！");
			window.setTimeout(
				function(){
					document.getElementById("txt4").focus();
				}
				,0
			);
			return;
		}else{
			flag = 0;
		}
	});

	//重置提示信息栏：
	$(".e").each(function(index, element) {
        $(this).change(function(){
			$(".f").html("");
    	});
    });
});
</script>