构建标准web 之 FormLite
在 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 分块 */