jquery表单验证之复选框验证-disabled属性

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 4 <html>
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 7         <title>表单验证之复选框验证</title>
 8         <style type="text/css">
 9             div {
10                 padding: 2px;
11             }
12             .label {
13                 float: left;
14                 width: 100px;
15             }
16             .error {
17                 color: red;
18                 padding-left: 10px;
19             }
20             .infobox {
21                 width: 200px;
22             }
23             .submit {
24                 margin-left: 100px;
25                 margin-top: 10px;
26             }
27         </style>
28         <script src="jquery-1.5.2.js" type="text/javascript"></script>
29         <script type="text/javascript">
30             $(document).ready(function(){
31                 $('.error').hide();
32                 $('.userid').blur(function(){
33                     var data = $('.userid').val();
34                     var len = data.length;
35                     if(len<1) {
36                         $('.userid').next().show();
37                         //不可编辑属性
38                         $('.password').attr('disabled', true);
39                         $('.confpass').attr('disabled', true);
40                     }
41                     else {
42                         $('.userid').next().hide();
43                         $('.password').removeAttr('disabled');
44                         $('.confpass').removeAttr('disabled');
45                     }
46                 });
47                 
48                 $('.password').blur(function(){
49                     var data = $('.password').val();
50                     if(data.length<1) {
51                         $('.password').next().show();
52                         $('.confpass').attr('disabled', true);
53                     }
54                     else {
55                         $('.password').next().hide();
56                         $('.confpass').removeAttr('disabled');
57                     }
58                 });
59                 
60                 $('.confpass').blur(function(){
61                     if($('.password').val() != $('.confpass').val()) {
62                         $('.confpass').next().show();
63                     }
64                     else {
65                         $('.confpass').next().hide();
66                     }
67                 });
68             });
69         </script>
70         <body>
71             <form>
72                 <div>
73                     <span class="label">用户名 *</span>
74                     <input type="text" class="userid" name="userid" />
75                     <span class="error">用户名不能为空</span>
76                 </div>
77                 <div>
78                     <span class="label">密码    *</span>
79                     <input type="password" class="password" name="password" />
80                     <span class="error">密码不能为空</span>
81                 </div>
82                 <div>
83                     <span class="label">确认密码    *</span>
84                     <input type="password" class="confpass" name="confpass" />
85                     <span class="error">两次密码输入不一致</span>
86                 </div>
87             </form>
88         </body>
89 </html>
posted on 2017-01-21 21:20 Sharpest 阅读(477) 评论(0) 编辑收藏举报