<form id="form1">

         <h2>增加管理员</h2>

         <table>

             <tr>

                 <td>姓名：</td>

                 <td>

                     <input name="username"/>

                     <span>*</span>

                 </td>

                 <td>

                     <div class="vali_info">

                      10个字符以内的字母、数字或下划线的组合

                     </div>

                 </td>

             </tr>

             <tr>

                 <td>密码：</td>

                 <td>

                     <input type="password" name="pwd"/>

                     <span>*</span>

                 </td>

                 <td>

                     <div class="vali_info">6位数字</div>

                 </td>

             </tr>

             <tr>

                 <td></td>

                 <td colspan="2">

                 <input type="submit" value="保存"/>

                 <input type="reset" value="重填"/>

                 </td>

             </tr>

         </table>

     </form>

 table{width:700px}

 /*¸¸ÔªËØϵĵÚ1¸ö£¬µÚn¸ö£¬×îºóÒ»¸ötd×ÓÔªËØ*/

 td:first-child{width:60px}

 /*IE9以上支持nth-child*/

 td:nth-child(2){width:200px}

 /*IE*/

 td:first-child+td{width:200px}

 /*IE²»Ö§³Ö--¿ÉÒÔ¿¿×Ü¿í¶ÈÀ´µ÷½Ú

 td:last-child{width:340px}*/

 td span{color:red}

 .vali_info{/* Ò³Ãæ³õʼ£¬ÑéÖ¤ÏûÏ¢²»ÏÔʾ */

     display:none;

 }

 .txt_focus{/*µ±Îı¾¿ò»ñµÃ½¹µãʱ´©ÉÏ*/

     border-top:2px solid black;

     border-left:2px solid black;

     background-color: yellow;

 }/*µ±Îı¾¿òʧȥ½¹µãʱÍÑÏÂ*/

 .vali_success,.vali_fail{

     background-repeat:no-repeat;

   background-position:left center;

     display:block;

 }

 /* ÑéÖ¤ÏûÏ¢£ºÑé֤ͨ¹ýʱµÄÑùʽ */

 .vali_success{

     background-image:url("../images/ok.png");

     padding-left:20px;

     width:0px;height:20px;//注意这里的需要隐藏文字的样式

     overflow:hidden;//隐藏文字overflow不可缺少

 }

 /* ÑéÖ¤ÏûÏ¢£ºÑé֤ʧ°ÜʱµÄÑùʽ */

 .vali_fail{

     background-image:url("../images/err.png");

     border:1px solid red;

     background-color:#ddd;

     color:red;

     padding-left:30px;

 }

 //Step1:为name为username和pwd的文本框绑定获得焦点事件

 //获得表单对象:

 var form=document.forms[0],

     txtName=form.username,

     txtPwd=form.pwd;

 txtName.onfocus=getFocus;

 txtPwd.onfocus=getFocus;

 function getFocus(){

   //this->当前文本框

   //当前文本框边框加粗

   this.className="txt_focus";

   //清除旁边div的class

   var div=this.parentNode.nextElementSibling

            .firstElementChild;

   div.className="";

 }

 txtName.onblur=function(){

   vali(this,/^\w{1,10}$/);

 }

 function vali(txt,reg){

   //清除当前文本框的class

   txt.className="";

   //获取旁边div

   var div=txt.parentNode.nextElementSibling

           .firstElementChild;

   //用reg测试当前文本框的内容

   //如果通过,就修改div的class为vali_success

   //增加true，false是为了方便函数后续的判断，需要了解；

   if(reg.test(txt.value)){

     div.className="vali_success";

     return true;

   }

   //否则修改div的class为vali_fail

   else{

     div.className="vali_fail";

     return false;

   }

 }

 txtPwd.onblur=function(){

   vali(this,/^\d{6}$/);

 }

 //为表单添加时间监听：注意这里为表单元素，需要注意；

 form.addEventListener('submit',function(e){

                  if(!vali(txtName, /^\w{1,10}$/))

                         txtName.focus();

                   else if(!vali(txtPwd,/^\d{6}$/))

                         txtPwd.focus();

                     else if(vali(txtName,/^\w{1,10}$/)&& vali(txtPwd,/^\d{6}$/)) {

                       this.submit();

                     }

                      e.preventDefault();

             })