老鼠划猫须

jquery+html写的邮箱和密码强度验证 

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5     <title></title>
  6     <style type="text/css">
  7         #Text1 {
  8             background-color: #eee;
  9         }
 10         #Text2 {
 11             float:left;
 12             background-color: #eee;
 13         }
 14         .div2 {
 15             width:30px;
 16             height:10px;
 17             background-color:#eee;
 18         }
 19         tr {
 20             text-align: center;
 21             font-size:12px;
 22             color:#eee;
 23         }
 24         #div1 {
 25             width: 100px;
 26             position:relative;
 27             bottom:32px;
 28             left:160px;
 29         }
 30     </style>
 31     <script src="Jquery1.7.js"></script>
 32     <script type="text/javascript">
 33         $(function () {
 34             $('#Text1').focus();
 35             var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
 36             $('#Text1').bind({
 37                 'focus': function () {
 38                 }, 'blur': function () {
 39                     if (!/.+@.+\.[a-zA-Z]{2,4}$/.test($('#Text1').val())) {
 40                         $('#Text1').focus();
 41                     }
 42                 }                
 43             });
 44             $('#Text1').keyup(function () {
 45                 $('#label1').text(/.+@.+\.[a-zA-Z]{2,4}$/.test($('#Text1').val()) ? '邮箱可用' : '邮箱不可用');
 46             })
 47             $('#Text2').keyup(function () {
 48                 if ($('#Text2').val().length > 16) {
 49                     $('#Text2').val($('#Text2').val().substr(0,16));
 50                 }
 51                 $('#div1 table tr:eq(0) td').css('color', '#eee');
 52                 $('#div1 table tr:eq(1) td div').css('background-color', '#eee');
 53                 if (/^[0-9]{8,12}$/.test($('#Text2').val()) || /^[a-z]{8,12}$/.test($('#Text2').val()) || /^[A-Z]{8,12}$/.test($('#Text2').val())) {
 54                     $('#div1 table tr:eq(0) td:eq(0)').css('color', '#000');
 55                     $('#div1 table tr:eq(1) td:eq(0) div').css('background-color', '#ff6a00');
 56                 }
 57                 else if (/^([0-9]|[a-z]){8,16}$/.test($('#Text2').val()) || /^([0-9]|[A-Z]){8,16}$/.test($('#Text2').val()) || /^[0-9]{12,16}$/.test($('#Text2').val()) || /^[a-z]{12,16}$/.test($('#Text2').val()) || /^[A-Z]{12,16}$/.test($('#Text2').val())) {
 58                     $('#div1 table tr:eq(0) td:lt(2)').css('color', '#000');
 59                     $('#div1 table tr:eq(1) td:lt(2) div').css('background-color', '#ff6a00');
 60                 }
 61                 else if (/^([0-9]|[a-z]|[A-Z]){10,16}$/.test($('#Text2').val())) {
 62                     $('#div1 table tr:eq(0) td').css('color', '#000');
 63                     $('#div1 table tr:eq(1) td div').css('background-color', '#33ff33');
 64                 }
 65                 else {
 66                     $('#div1 table tr:eq(0) td').css('color', '#eee');
 67                     $('#div1 table tr:eq(1) td div').css('background-color', '#eee');
 68                 }
 69             })
 70         })
 71     </script>
 72 </head>
 73 <body>
 74     <input id="Text1" type="text" /><label id="label1"></label><br /><!--邮箱-->
 75     <input id="Text2" type="password" />
 76     <div id="div1">
 77         <table>
 78             <tr>
 79                 <td>
 80                     弱
 81                 </td>
 82                 <td>
 83                     中
 84                 </td>
 85                 <td>
 86                     强
 87                 </td>
 88             </tr>
 89             <tr>
 90                 <td>
 91                     <div class="div2"></div>
 92                 </td>
 93                 <td>
 94                     <div class="div2"></div>
 95                 </td>
 96                 <td>
 97                     <div class="div2"></div>
 98                 </td>
 99             </tr>
100         </table>
101 
102     </div>
103 &nbsp;
104 </body>
105 </html>

 

posted on 2013-04-23 17:24  昔日流年  阅读(259)  评论(0)    收藏  举报

导航