表单验证时，需要用户必须输入某个字段，否则禁止输入其它字段：即屏蔽其它字段的输入。
有了jquery，实现起来相当简单多了。
1，页面内容部分
假设页面有三个字段：用户名、密码、密码确认。
2，jquery代码部分
<script>
$(document).ready(function() {
$('.error').hide();
$('.username').blur(function(){
data=$('.username').val();
var len=data.length;
if(len<1)
{
$('.username').next().show();
$('.password').attr('disabled',true);
$('.confpass').attr('disabled',true);
}
else
{
$('.username').next().hide();
$('.password').removeAttr('disabled');
$('.confpass').removeAttr('disabled');
}
});
$('.password').blur(function(){
data=$('.password').val();
var len=data.length;
if(len<1)
{
$('.password').next().show();
$('.confpass').attr('disabled',true);
}
else
{
$('.password').next().hide();
$('.confpass').removeAttr('disabled');
}
});
$('.confpass').blur(function(){
if($('.password').val() !=$('.confpass').val())
{
$('.confpass').next().show();
}
else
{
$('.confpass').next().hide();
}
});
});
Java代码
$(document).ready(function() {
$('.error').hide();
$('.username').blur(function(){
data=$('.username').val();
var len=data.length;
if(len<1)
{
$('.username').next().show();
$('.password').attr('disabled',true);
$('.confpass').attr('disabled',true);
}
else
{
$('.username').next().hide();
$('.password').removeAttr('disabled');
$('.confpass').removeAttr('disabled');
}
});
$('.password').blur(function(){
data=$('.password').val();
var len=data.length;
if(len<1)
{
$('.password').next().show();
$('.confpass').attr('disabled',true);
}
else
{
$('.password').next().hide();
$('.confpass').removeAttr('disabled');
}
});
$('.confpass').blur(function(){
if($('.password').val() !=$('.confpass').val())
{
$('.confpass').next().show();
}
else
{
$('.confpass').next().hide();
}
});
});
</script>
原理分析：
在每个文本框的onblur事件中进行判断，先看用户框中的是否输入和长度是否匹配，如果不符合要求的话，则$('.username').next().show(); 这句。
也就是显示下一个元素(即出错信息提示,即<span class="error"> User name cannot be blank</span> ) 。
且同时
将其他字段的disabled属性设置为TRUE即可。