【功能描述】
“不合法不准走”:有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>