表单布局和验证规则说明.pptxVIP

表单布局及验证 页面布局（表单项|整体表单） 交互效果 数据验证 通用结构总结之一 表单页面布局 第一部分 表单页面布局 表单 表单项 表单项 表单项 特殊表单项 按钮行 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 根据所填内容显示对应提示语 表单整体验证 单个表单项验证结果 单个表单项验证结果 单个表单项验证结果 CheckXXX () { ----页面级验证--- If (isSubmit=“y”) { 1.补充为全验证 2.返回结果布尔值 } } CheckAll () { 组合表单中所有表单项验证的结果 }