jquery ajax显示对号和错号，用于验证输入验证码是否正确

1. <script src="js/j.js"></script>
2. <script>
3. $(document).ready(function(e) {
4. $('#yes').hide();
5. $('#no').hide();
6. $('input[name=gcode]').keyup(function(){
7. if($(this).val().length==4){
8. $.post('gbook.php',{cc:$('input[name=gcode]').val()},function(msg){
9. if(msg=='yes'){
10. $('#no').hide();
11. $('#yes').show();
12. }else{
13. $('#yes').hide();
14. $("#no").show();
15. }
16. });
17. }
18. });
19. });
20. </script>

首先引入jquery

1. .sl-error-verifycode {
2. background-image: url("images/icons.png");
3. background-position: -26px 0;
4. background-repeat: no-repeat;
5. display: block;
6. font-size: 18px;
7. height: 23px;
8. line-height: 20px;
9. margin-left: 180px;
10. margin-top: -25px;
11. position: relative;
12. text-align: center;
13. width: 20px;
14. z-index: 2;
15. }
16. .sl-correct-verifycode {
17. background-image: url("images/icons.png");
18. background-position: -50px 0;
19. background-repeat: no-repeat;
20. display: block;
21. font-size: 18px;
22. height: 23px;
23. line-height: 20px;
24. margin-left: 180px;
25. margin-top: -25px;
26. position: relative;
27. text-align: center;
28. width: 20px;
29. z-index: 2;
30. }

验证码的html 代码

1. <tr>
2. <td height="40" align="right">验证码：</td>
3. <td height="40"><span class="addred">*</span></td>
4. <td height="40">
5. <input type="text" name="gcode" class="txtlist">
6. <span class="sl-correct-verifycode"></span><span class="sl-error-verifycode"></span>
7. <img align="middle" src="inc/cc.php" onClick="this.src='inc/cc.php?'+new Date" title="点击换一张图片" width="100px"></td>
8. </tr>

gbook.php

1. <?php
2. session_start();
3. if(isset($_POST['cc'])){
4. $cc = strtolower($_POST['cc']);
5. $ss = strtolower($_SESSION['code']);
6. if($cc==$ss){
7. echo "yes";
8. }else{
9. echo "no";
10. }
11. }

注意图片一定要引入

来自为知笔记(Wiz)