javascript学习笔记（十二）初始化表单，及对其简单验证


		在web开发中，经常需要用户填写一些信息提交到数据库中，这个时候我们就会用到表单。对于前端来说，表单设计的好与不好直接影响到用户的体验。 
在今天的学习笔记中，和大家一起来先设计一个表单，然后一步一步一类完善用户体验。
先看HTML代码：
view sourceprint?01 <form method="post" action="#" name="register">  
02     <p>  
03         <label for="user_name">用户名：</label>  
04         <input type="text" value="请输入您的用户名" name="用户名" id="user_name" class="inputs" /><span>*</span>  
05     </p>  
06     <p>  
07         <label for="email">邮 箱：</label>  
08         <input type="text" value="请输入您的邮箱" name="邮箱" id="email" class="inputs" /><span>*</span>  
09     </p>  
10     <p>  
11         <label for="mobile_phone">手机号：</label>  
12         <input type="mobile_phone" value="请输入您的手机号" name="手机号" id="mobile_phone" class="inputs" /><span>*</span>  
13     </p>  
14     <p>  
15         <label for="psw">登录密码：</label>  
16         <input type="password" value="" name="密码" id="psw" class="inputs" /><span>*</span>  
17     </p>  
18     <p>  
19         <label for="re_psw">确认密码：</label>  
20         <input type="password" value="" name="密码" id="re_psw" class="inputs" /><span>*</span>  
21     </p>  
22     <p>  
23         <input type="submit" value="注册" class="btn" />  
24     </p>  
25 </form> 
我们先来看代码中的"label"标签，当labels标签中的for属性值和input元素中的id值相同时，在前台页面中当我们点击元素的名称（文本）时，该元素就会被触发（获得焦点、选中）。这在表单元素可选区域不大的时候尤为起作用，比如单选按钮、多选按钮，供用户点击的区域并不大，如果设置了label，则用户直接点击元素的名称时，就会自动选中。所以设置label值还是很有意义的。
但是这个功能并不是所有的浏览器都支持。没有关系，我们可以用一个简单的js函数labelFocus()来实现。
view sourceprint?01 function labelFocus() {  
02     var labels = document.getElementsByTagName("label");  
03     for (var i=0; i<labels.length; i++) {  
04         var id = labels[i].getAttribute("for");  
05         var element = document.getElementById(id);  
06         element.onclick = function () {  
07             this.focus();  
08         }  
09     }  
10 } 
再来看HTML代码中，每个input元素我们都定义了一个默认值，这样可以引导用户填写正确的信息。但是同样会造成一个麻烦就是用户要先把我们定义的默认值删掉，然后再去填写自己的信息。对于用户来说显然是不好的体验。这里我们可以这样改善，当该元素获得焦点时，自动消除我们定义的默认值，失去焦点时，如果用户什么都没有输入，则又还原为默认值。请看我们定义的resetFields()函数。
view sourceprint?01 function resetFields() {  
02     var forms = document.forms;  
03     for (var i=0; i<forms.length; i++) {  
04         for (var j=0; j<forms[i].elements.length; j++) {  
05             var element = forms[i].elements[j];  
06             if (element.type == "submit") continue;  
07             element.onfocus = function() {  
08                 if (this.value == this.defaultValue) {  
09                     this.value = "";  
10                 }  
11             }  
12             element.onblur = function() {  
13                 if (this.value == "") {  
14                     this.value = this.defaultValue;  
15                 }  
16             }  
17         }  
18     }  
19 } 
请看完整代码示例1：
show sourceview sourceprint?001 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
002 <html xmlns="http://www.w3.org/1999/xhtml"><head>  
003 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">  
004 <title>forms elements -- by zhangchen</title>  
005 <style type="text/css">  
006     /*--common style--*/  
007     * {  
008         margin:0;  
009         padding:0;  
010     }  
011     body {  
012         font-family:微软雅黑, verdana;  
013         font-size:12px;  
014         background-color:#EFFFDF;  
015     }  
016     .container {  
017         width:960px;  
018         margin:0 auto;  
019     }  
020     .header {  
021         height:35px;  
022         padding-top:30px;  
023

补充：web前端 , JavaScript ,