表单布局及验证规则说明.pptVIP

页面布局（表单项|整体表单） 交互效果 数据验证 通用结构总结之一 表单页面布局 第一部分 表单页面布局 表单 表单项 表单项 表单项 特殊表单项 按钮行 row row row row--long btnRow 表单页面布局—表单项 div class=row div class=“fTab”用户名/div div class=“fInput input name=“userName” id=“userName”/ /div div class=“fTip formTip” id=“userNameTip” span class=“txt”提示语/span /div div class=clear/div /div!– row end-- 举例：输入框 .row .fTab .row .row .fInput .row .fTip .clear (全站共用) 提示语展示样式 特殊表单项布局 举例：选择框加说明 div class=“row” div class=“long” input type=checkbox name= nbsp; span class=blue-bold同时入…/spanbr span class=“gray”…加入成为企业…/span /div!--long end-- div !--row end -- 特殊表单布局—按钮行 div class=“btnRow” input type=“submit” name=“” class=“btn-blue” value=“注册” div !-- btnRow end -- 表单页面布局—表单提示语及样式设定 绿色 ：数据符合要求 蓝色：友好提示, 文本框获得焦点且无输入信息 红色：错误提示， 该信息不能通过验证 黄色 ：警告提示，填入的信息虽不影响表单提交，但属于强烈建议修改的类型，如：密码强度较弱时的提示。 在input的onblur事件或表单提交时验证 警告提示语 .fomTip 默认不可见 .fomTipR .fomTipA .fomTipP CSS样式 提示含义 提示页面 表单页面布局—表单整体 from class=“formTotal” div class=“formTotalWrap” div class=“row”/div!--row end -- div class=“row”/div!--row end -- … div class=row/div!--row end -- div class=“btnRow/div!--btnRow end -- /div!-- formTotalWrap end-- /from!--form end-- .formXXX{} .formXXXWrap{} .form .row{margin:4px 0;height:30px;position:relative;} .form .row .fTab{position:absolute;left:0;top:3px;text-align:right;width:50px;} .form .row .fInput{position:absolute;left:55px;top:0px;} .form .row .fTip{position:absolute;left:186px;top:3px;text-align:left;width:100px;} 表单页面布局—表单CSS 布局CSS .ini{boder:1px solid #e00;background-color:#bdc443; …} .W50{width:50px;} .H22{height:22px;} 表单元素（文本框）CSS .formTip{…} .formTipR{…} .formTipA{…} .formTipP{…} 验证提示CSS 表单交互和数据验证 第二部分 表单交互和数据验证—概述 表单项 onfocus onblur 表单元素input 提示语 tip 获得焦点样式 由不可见到可见 显示默认提示语 提示语 tip 根据所填内容显示对应提示语 表单整体验证 单个表单项验证结果 单个表单项验证结果 单个表单项验证结果 True or False True or False True or False CheckXXX () { ----页面级验证--- If (isSubmit=“y”) { 1.补充为全验证 2.返回