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

最终实现效果如下：