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

HTML样式

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

 1 <form id="form1">
 2         <h2>增加管理员</h2>
 3         <table>
 4             <tr>
 5                 <td>姓名：</td>
 6                 <td>
 7                     <input name="username"/>
 8                     <span>*</span>
 9                 </td>
10                 <td>
11                     <div class="vali_info">
12                      10个字符以内的字母、数字或下划线的组合
13                     </div>
14                 </td>
15             </tr>
16             <tr>
17                 <td>密码：</td>
18                 <td>
19                     <input type="password" name="pwd"/>
20                     <span>*</span>
21                 </td>
22                 <td>
23                     <div class="vali_info">6位数字</div>
24                 </td>
25             </tr>
26             <tr>
27                 <td></td>
28                 <td colspan="2">
29                 <input type="submit" value="保存"/>
30                 <input type="reset" value="重填"/>
31                 </td>
32             </tr>                
33         </table>
34     </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();
            })