1.
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>