1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 4 <title>Reg</title> 5 <style> 6 .state1{ 7 color:#aaa; 8 } 9 .state2{ 10 color:#000; 11 } 12 .state3{ 13 color:red; 14 } 15 .state4{ 16 color:green; 17 } 18 </style> 19 <script src="jquery.js"></script> 20 <script> 21 $(function(){ 22 23 var ok1=false; 24 var ok2=false; 25 var ok3=false; 26 var ok4=false; 27 // 验证用户名 28 $('input[name="username"]').focus(function(){ 29 $(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state2'); 30 }).blur(function(){ 31 if($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=''){ 32 $(this).next().text('输入成功').removeClass('state1').addClass('state4'); 33 ok1=true; 34 }else{ 35 $(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state3'); 36 } 37 38 }); 39 40 //验证密码 41 $('input[name="password"]').focus(function(){ 42 $(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state2'); 43 }).blur(function(){ 44 if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=''){ 45 $(this).next().text('输入成功').removeClass('state1').addClass('state4'); 46 ok2=true; 47 }else{ 48 $(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state3'); 49 } 50 51 }); 52 53 //验证确认密码 54 $('input[name="repass"]').focus(function(){ 55 $(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state2'); 56 }).blur(function(){ 57 if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!='' && $(this).val() == $('input[name="password"]').val()){ 58 $(this).next().text('输入成功').removeClass('state1').addClass('state4'); 59 ok3=true; 60 }else{ 61 $(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state3'); 62 } 63 64 }); 65 66 //验证邮箱 67 $('input[name="email"]').focus(function(){ 68 $(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state2'); 69 }).blur(function(){ 70 if($(this).val().search(/w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*/)==-1){ 71 $(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state3'); 72 }else{ 73 $(this).next().text('输入成功').removeClass('state1').addClass('state4'); 74 ok4=true; 75 } 76 77 }); 78 79 //提交按钮,所有验证通过方可提交 80 81 $('.submit').click(function(){ 82 if(ok1 && ok2 && ok3 && ok4){ 83 $('form').submit(); 84 }else{ 85 return false; 86 } 87 }); 88 89 }); 90 </script> 91 </head> 92 <body> 93 94 <form action='do.php' method='post' > 95 用 户 名:<input type="text" name="username"> 96 <span class='state1'>请输入用户名</span><br/><br/> 97 密 码:<input type="password" name="password"> 98 <span class='state1'>请输入密码</span><br/><br/> 99 确认密码:<input type="password" name="repass"> 100 <span class='state1'>请输入确认密码</span><br/><br/> 101 邮 箱:<input type="text" name="email"> 102 <span class='state1'>请输入邮箱</span><br/><br/> 103 <a href="javascript:;"><img class='submit' type='image' src='./images/reg.gif' /></a> 104 </form> 105 </body>
来源:https://my.oschina.net/yuewawa/blog/609925