文档介绍：前端开发设计规范文档--精选文档
前端开发设计规范文档--精选文档
前端开发设计规范文档--精选文档
前端开发设计规范

目录
前端开发设计规范 1
一、HTML使用规范都要指定action属性，但属性值需要则填写，不需要则留空，method属性统一使用POST；所有form表单都要在提交前对输入的数据前进行验证，验证使用jQuery validate插件，书写规范如下：
前端开发设计规范文档--精选文档
前端开发设计规范文档--精选文档
前端开发设计规范文档--精选文档
3
、所有不可更改的input元素都要设置readonly属性。
、按功能模块添加简单明了的注释，在功能模块的开始标明模块开始，结束时标明模块结束，注释单独占一行；模块之间留行间隔便于查看代码。
、已过时的元素标签使用CSS样式来代替，已过时的标签属性禁止使用，使用CSS样式定义来实现。
、HTML元素命名规范
涉及到跟服务端交互的元素，元素命名应当与服务端程序中定义的对应变量名相同，。
页面上使用到的不涉及与服务端交互的HTML元素其id和name需统一，所有命名使用元素标签的缩写_后缀方式,后缀命名使用小驼峰命名法即第一个单词全部使用小写，其他单词首字母大写，常见元素命名规则如下表所示：
text输入框
txt
txt_userName
button按钮
btn
btn_check
select下拉选择
sel
sel_beginTime
checkbox多选项
chk
chk_departmentNumber
div标记
div
div_result
submit提交按钮
sub
sub_register
hidden隐藏值
hdn
hdn_userId
前端开发设计规范文档--精选文档
前端开发设计规范文档--精选文档
前端开发设计规范文档--精选文档
4
二、WEB页面开发规范
、错误跳转页面的处理
400、401、403、404、405、406、407、410、412、414、500、501、502等错误代码使用其相应的统一页面，所有错误信息全部使用中文错误信息，标点符号使用中文半角符号。页面设计与项目功能相匹配，做到简洁友好。
、提示信息的处理
成功提示信息可以使用弹窗或跳转统一成功页面的方式，成功页面的风格与网站总体风格相同，格式如下："成功："+提示信息+"！"。
、页面的返回
();(-1)。
、提交前数据的判断验证
、所有由用户输入的数据在提交前都要进行验证。
、验证方式使用jQuery validate插件，需要验证的项：
长度验证：默认长度为数据库中数据的最大长度，中文占两个字符，英文占一个字符。
为空验证：所有不允许为空的输入内容为空时不允许提交。
前端开发设计规范文档--精选文档
前端开发设计规范文档--精选文档
前端开发设计规范文档--精选文档
5
其他验证：需要根据输入内容的不同设定合适的验证，如Email格式是否正确，身份证号格式是否正确等。
、验证后发现错误，需要提示明确的错误信息。错误提示信息样式：字体颜色#ff3366，文字前面加红色感叹号小图标。
、可输入表单需要具有输入内容的提示信息，可使用placeholder属性来定义或者自定义，颜色必须使用灰色，字体比网站使用字体小。
、删除操作
所有涉及删除的操作，需要用户进行确认之后才能进行操作。
、页面中java代码的使用
页面中不允许使用<% %>的方式嵌入java代码。
、网站页面布局规范
、前台页面尺寸
、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定，1024*768下，网页宽度保持在1002以内，不会出现水平滚动条，高度同样视版面内容决定。
、根据第一条原则，规定网页的尺寸为width=960px,height=600px。
前端开发设计规范文档--精选文档
前端开发设计规范文档--精选文档
前端开发设计规范文档--精选文档
6
、页面长度原则上不超过3屏（可根据实际情况设定），宽度不超过1屏。
、全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px。
、每个非首页静态页面含图片字节不超过60K，