HTML-DOM实例——实现带样式的表单验证

    HTML样式

基于table标签来实现页面结构

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

CSS样式

 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;
 }

JS代码如下：

 //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();
             })

最终实现效果如下：