JavaScript网站设计实践（七）编写最后一个页面 改进表单

<div id="content">
            <h1>联系我们乐队</h1>
            <form method="post" action="#">
                <fieldset>
                    <p>
                        <label for="name">Name:</label>
                        <input type="text" id="name" name="name" value="your name" class="required"/>
                    </p>
                    <p>
                        <label for="email">Email:</label>
                        <input type="text"  id="email" name="email" value="your email" class="email required" />
                    </p>
                    <p>
                        <label for="message">Message:</label>
                        <textarea rows="7" cols="45" id="message" name="message" class="required"> 写下你的留言</textarea>
                    </p>
                    <input class="contact_sub" type="submit" value="留言" />
                </fieldset>
            </form>
        </div>

label{
    display: block;
}


fieldset{
    border: 0;
}
.contact_sub{
    width: 100px;
    height:30px;
}

/*******兼容不同浏览器  点击文本即可使与之相关的表单输入获得焦点*****/
function focusLabels(){
    //旧浏览器  对象检测
    if(!document.getElementsByTagName) return false;
    
    //获取元素
    var labels = document.getElementsByTagName("label");
    
    //给有for属性的label添加focus()函数 
    for(var i=0; i<labels.length; i++){             //for循环判断
        if(!labels[i].getAttribute("for")) continue;
        labels[i].onclick = function(){
            var id= this.getAttribute("for");                 //获取到label中for的值
            if(!document.getElementById(id)) return false;    //再判断是否存在跟for的值一样的id值    有则添加focus()方法
            var element = document.getElementById(id);
            element.focus();
        }
    }
}
addLoadEvent(focusLabels);

/*****************删除表单默认值*************************/
function resetFields(whichform){
    for(var i=0; i<whichform.elements.length; i++){
        var element = whichform.elements[i];          //获取每个表单元素
        if(element.type == "submit") continue;         //如果是表单元素类型是submit，则退出本次循环
        if(!element.defaultValue) continue;           //如果不是表单元素的默认值，也退出本次循环
        element.onfocus = function(){
            if(this.value == this.defaultValue){
                this.value = "";
            }
        }
        element.onblur = function(){
            if(this.value == ""){
                this.value = this.defaultValue;
            }
        }
    }
}

/*************找到每个表单元素whichform*****************/
function prepareForms(){
    for(var i=0; i<document.forms.length; i++){
        var thisform = document.forms[i];
        resetFields(thisform);
        
        thisform.onsubmit = function(){
            return validateForm(this);
        }
    }
}
addLoadEvent(prepareForms);

/**********表单数据合法性检验  是否已填isFillEd(field)******/
function isFilled(field){
    if(field.value.length < 1 || field.value == field.defaultValue){
        return false;
    }else{
        return true;
    }
}

/***********邮箱格式是否正确****************************/
function isMail(field){
    if(field.value.indexOf("@") == -1 || field.value.indexOf(".") == -1){
        return false;
    }else{
        return true;
    }
}

/***********整合检验表单合法性**************************/
function validateForm(whichform){               //如果表单含有required的className属性值，则调用isFilled
    for(var i=0; i<whichform.elements.length;i++){
        var element = whichform.elements[i];
        if(element.className.indexOf("required") != -1){
            if(!isFilled(element)){
                alert("请填写"+element.name);
                return false;
            }
        }
        if(element.className.indexOf("email") != -1){
            if(!isMail(element)){
                alert("请填写正确的邮箱地址");
                return false;
            }
        }
    }
    return true;
}