?在一個比如表單驗證的過程中,有時候,假如要用戶一定要輸入某個字段,否則不給輸入
其他字段,即屏蔽其他字段的輸入,這個時候依然可以用jquery可以做到,例子如下:

1 假如頁面有三個字段,用戶名和密碼和密碼確認(rèn)三個字段:
?

? <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中的腳本設(shè)置
?

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事件中進(jìn)行判斷,先看用戶框
中的是否輸入和長度是否匹配,如果不符合要求的話,則$('.username').next().show();
這句,其實是顯示下一個元素(即出錯信息提示,即<span class="error"> User name cannot be blank</span>
)
? 并且同時$('.password').attr('disabled',true);
$('.confpass').attr('disabled',true);
?? 將其他字段的disabled屬性設(shè)置為TRUE即可.
?? 當(dāng)然,要是輸入了的話,也要重新設(shè)置回來,道理就這么簡單了

?

?

?

?

轉(zhuǎn)自： http://jackyrong.iteye.com/blog/1148856

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