构建标准web 之 FormLite

[置顶] Lite-Ext 适合WebPage的轻量级Ext

在 google code 持续更新，这里停止

演示@google code  

 

 

在 web 开发时 ， 表单作为用户交互的主题是不可缺少的部分，而这部分我认为又是设计影响最少的部分，工程般得构造一个通用模版 是很方便也是很实用的。而难点恰恰在于 如何在符合现代web标准下实现一个功能完备，代码简洁，结构表现行为分离，富含语义,具备可访问性的表单。

 

 

演示页面：   这里

 

    效果图：

 

    

 

 

 

 

 

 

 

 

 

1.2

 

 

 

 

 

 

 

1.5

 

 

 

2.4(结合TipLite)

 

 

 

当css javascript 禁用

 

 

 

 

 

 

 

效果表单的实现要点：

 

1.表单的分块管理，对于一个复杂的表单进行区域划分

2.表单域提示标签和输入标签的整洁对齐

3.出错提醒文字的排版与检查

4.如何用xhtml语义标签,css,javascript 将上面的描述分离实现

5.当用户端 css javascript 禁用时 是否具备可访问性

6.加入悬停提示，用户点击后消失，实现为绝对定位的label覆盖在 输入框上

我这里采用了简化的提示标签生成，更好的符合渐进增强理念应该是 提示标签事先现在html中，在其后的javascript中将其隐藏并绝对定位到input上面。

 

7.当提交失败，用信息层遮罩提交按钮一会再渐隐消失。

 

 

 

以下 将各个要点的关键实现简要描述：

 

1.区域划分

 

   在form中 用 标签 fieldset 花费出 各个 子表单。

 

2.表单域布局

 

   将每一组表单域提示标签和输入标签，出错提醒文字看做一个整体块，在该块内对三者布局。

 

   xhtml:

 

 

<fieldset>
							<legend><span>公司登陆信息</span></legend>
							<div class="fields">
								<p>
									<label class='input_label' for="employerId">用户名 :<em class='required'>(必填)</em></label> <input type="text" class='input_margin' name="employerId" id="employerId" /><span class='feedback'>用户名无效</span>
								</p>
								<p>
									<label class='input_label' for="loginPassword">密码 :<em class='required'>(必填)</em></label> <input class='input_margin' name="loginPassword" id="loginPassword" type='password' /><span class='feedback'>密码无效</span>
								</p>
								<p>
									<label class='input_label' for="loginPassword2">确认密码 :<em class='required'>(必填)</em></label> <input class='input_margin' name="loginPassword2" id="loginPassword2" type='password' /><span class='feedback'>确认密码不相等</span>
								</p>
							</div>
						</fieldset>

 

    css:

 

 

form p {
	margin:5px;
	
}

.input_margin {
	background-color:#FFFFFF;
	border:1px solid #B9B9B9;
	width:250px;
}

/*表单域文字标签向左对齐，并占据相同的宽度（根据用户端字体大小）*/
.input_label {
	float:left;
	width:12em;
	color:#6E6E6E;
	font-size:12px;

}

/*对于 高级浏览器提供选中高亮*/
input:focus,textarea:focus {
	background:#ffc;
}

input[type="text"],textarea {
	border-top:2px solid #999;
	border-left:2px solid #999;
	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;
}

/*出错提醒紧跟表单输入域后，并设置一定间隔,初始隐藏*/
.feedback {
	visibility:hidden;
	font-weight:bold;
	color:red;
	padding-left:30px;
	width:10em;
}

/*必选按钮着中显示*/
.required {
	font-size:0.85em;
	color:#760000;
}

 

 

3.javascript 粘合剂

 

 

   js 对 css 和 xhtml 增加交互验证功能,目前演示单单验证非空，进一步可以自定义规则验证，规则可以是正则表达式等。提前配置即可。

 

    当用户离开一个表单域或者提交表单时，需要进行必要的验证。

 

 

 

4.Form 2.0 封装模块Ext.ux.FormLite , 代码使用：

 

//所有需要验证的表单域
	  //fieldId:表单域id
	  //regs:每个表单域必须符合的规则集合
	  //validator 验证函数，返回出错值
	  //tip : 空文本框时一点提示悬挂
	  
    var checkFields=
    [
    {fieldId:'employerDesc',tip:'一点悬浮提醒,没有填写时出现'},
    
    {fieldId:'employerName',regs:[{reg:/.+/,info:'必填哦'},{reg:/[^\d]+/,info:'不能有数字哦'}]},
    
    {fieldId:'employerRegion2',regs:[{reg:/.+/,info:'必填哦'}]},
    
    {fieldId:'contactName',regs:[{reg:/.+/,info:'必填哦'}]},
    
    {fieldId:'contactPhone',regs:[{reg:/.+/,info:'必填哦'}]},
    
    {fieldId:'contactEmail',regs:[{reg:/.+/,info:'必填哦'}]},
    
    {fieldId:'employerId',regs:[{reg:/.+/,info:'必填哦'}]},
    
    {fieldId:'loginPassword',regs:[{reg:/.+/,info:'必填哦'}]},
    
    {fieldId:'loginPassword2',validator:function(){
    		return this.dom.value!=	Ext.get('loginPassword').getValue() ?'密码不一致':'';
     }
   }
     ];
     
     var formValidator = new Ext.ux.FormLite(
     	{
     		//所需验证的表单id
    		formId:'compnay_register_form',
    		//现在为 tip 报错，默认为side ，旁边错误信息显示
    		//msgType:'tip',
    		//所有需要检测的表单字段配置
    		checkFields:checkFields
    	}
    );
    
    
    //当验证失败时，触发invalid,参数 失败的表单字段
    formValidator.on('invalid',function(errorFields) {
    		
    		for(var i=0;i<errorFields.length;i++) {
    			//alert('出错表单 id :'+errorFields[i].id);
    		}
    	
    });

 

 

 

/*
Form 1.2(200904221754) 加入对不同规则显示不同的出错串,优化出错视觉提醒
Form 1.5(200905062249) 加入输入框悬停提示，没有填写时出现,必须有定位的div父元素包含
Form 2.0(200905121707) 封装模块 Ext.ux.FormLite ,增加配置项
Form 2.2(200905191625) 加入验证失败覆盖层遮盖提交按钮，修改tip提醒设置方法
Form 2.3(200906021755) 错误提示修正，表单状态查询，validField增加
Form 2.4(20090803) 增加msgType 配置，结合TipLite 实现错误信息 tip显示
Form 2.4.5(20090930) 示例代码整理，使用 fieldset 分块 
*/

 

 

 

评论

1 楼 popoer 2009-05-22  

我只想说，博主你太有才了