jquery中限制部分字段不能输入

 在一个比如表单验证的过程中,有时候,假如要用户一定要输入某个字段,否则不给输入
其他字段,即屏蔽其他字段的输入,这个时候依然可以用jquery可以做到,例子如下:

1 假如页面有三个字段,用户名和密码和密码确认三个字段:
 

  <form>
<div>
<span class="label">User Name </span>
<input type="text" class="username" name="username"/>
<span class="error"> User name cannot be blank</span>
</div>
<div>
<span class="label">Password </span>
<input type="password" class="password" name="password" />
<span class="error"> Password cannot be blank</span>
</div>
<div>
<span class="label">Confirm Password </span>
<input type="password" class="confpass" name="confpass" />
<span class="error"> Password and Confirm Password don't match</span>
</div>
</form>

2 jquery中的脚本设置
 

Java代码  

1. $(document).ready(function() {   
2. $( '.error' ).hide();   
3. $( '.username' ).blur(function(){   
4. data=$( '.username' ).val();   
5. var len=data.length;   
6. if (len< 1 )   
7. {   
8. $( '.username' ).next().show();   
9. $( '.password' ).attr( 'disabled' , true );   
10. $( '.confpass' ).attr( 'disabled' , true );   
11. }   
12. else   
13. {   
14. $( '.username' ).next().hide();   
15. $( '.password' ).removeAttr( 'disabled' );   
16. $( '.confpass' ).removeAttr( 'disabled' );   
17. }   
18. });   
19. $( '.password' ).blur(function(){   
20. data=$( '.password' ).val();   
21. var len=data.length;   
22. if (len< 1 )   
23. {   
24. $( '.password' ).next().show();   
25. $( '.confpass' ).attr( 'disabled' , true );   
26. }   
27. else   
28. {   
29. $( '.password' ).next().hide();   
30. $( '.confpass' ).removeAttr( 'disabled' );   
31. }   
32. });   
33. $( '.confpass' ).blur(function(){   
34. if ($( '.password' ).val() !=$( '.confpass' ).val())   
35. {   
36. $( '.confpass' ).next().show();   
37. }   
38. else   
39. {   
40. $( '.confpass' ).next().hide();   
41. }   
42. });   
43. });  

    $(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();
}
});
});

  

   
原理其实很简单,比如这里,在每个文本框的onblur事件中进行判断,先看用户框
中的是否输入和长度是否匹配,如果不符合要求的话,则$('.username').next().show();
这句,其实是显示下一个元素(即出错信息提示,即<span class="error"> User name cannot be blank</span>
)
  并且同时$('.password').attr('disabled',true);
$('.confpass').attr('disabled',true);
   将其他字段的disabled属性设置为TRUE即可.
   当然,要是输入了的话,也要重新设置回来,道理就这么简单了

转自： http://jackyrong.iteye.com/blog/1148856

jquery中限制部分字段不能输入