本文详细介绍了论坛系统的功能模块设计，包括帖子分类、排序规则、板块管理及其实现原理，并探讨了实体类的设计方法和表单验证技术。
今日内容:分析需求,板块管理(增删改查,上下移动),写所有论坛相关的JavaBean.
-
分析需求
帖子的分类：置顶、精华、普通。（热门、推荐、锁定、...）
普通帖：...
置顶帖：排到最前面。（公告帖）
精华帖：不影响排序，只是一个标志，可以列出所有的精华帖。
-------
热门帖：只是一个标志。
锁定帖：不能回复。
...
主题列表的排序：
最新状态的帖子排到最前面，置顶帖在最上面。
分页
数据列表的分页效果：
分页面 + 过滤条件 + 排序条件
回帖列表的排序：
最新的回复排到最下面（最后一页）
分页
前几个回复的称呼：
1楼、2楼、3楼、...
楼主、沙发、板凳、地板、...
在页面中的"在线编辑器"。
所见即所得。
版块管理中的上下移动。
二.版块管理(增删改查,上下移动)
增删改查:
Forum.java:
|
package cn.itcast.oa.domain; /** * 实体:论坛版块 * @author Tan * */ public class Forum {
private Long id; private String name; private String description;
private int position; //位置信息,用于上移下移操作 … } |
ForumManageAction:
|
@Controller @Scope("prototype") public class ForumManageAction extends BaseAction<Forum>{ /** 列表 */ public String list() throws Exception { List<Forum> forumList = forumManagerService.findAll(); ActionContext.getContext().put("forumList", forumList); return "list"; }
/** 删除 */ public String delete() throws Exception { forumManagerService.delete(model.getId()); return "toList"; }
/** 添加页面 */ public String addUI() throws Exception { return "saveUI"; }
/** 添加 */ public String add() throws Exception { forumManagerService.save(model); return "toList"; }
/** 修改页面 */ public String editUI() throws Exception { //准备数据 Forum forum = forumManagerService.getById(model.getId()); ActionContext.getContext().getValueStack().push(forum); return "saveUI"; }
/** 修改 */ public String edit() throws Exception { //从数据库中取出要修改的对象 Forum forum = forumManagerService.getById(model.getId()); //设置要修改的属性 forum.setName(model.getName()); forum.setDescription(model.getDescription()); //保存到数据库 forumManagerService.update(forum); return "toList"; }
/** 上移 */ public String moveUp() throws Exception { forumManagerService.moveUp(model.getId()); return "tolist"; }
/** 下移 */ public String moveDown() throws Exception { forumManagerService.moveDown(model.getId()); return "tolist"; } } |
List.jsp:
|
<!-- 表头--> <thead> <tr align="CENTER" valign="MIDDLE" id="TableTitle"> <td width="250px">版块名称</td> <td width="300px">版块说明</td> <td>相关操作</td> </tr> </thead>
<!--显示数据列表--> <tbody id="TableData" class="dataContainer" datakey="forumList"> <s:iterator value="forumList"> <tr class="TableDetail1 template"> <td>${name} </td> <td>${description} </td> <td><s:a action="forumManage_delete?id=%{id}" onClick="return delConfirm()">删除</s:a> <s:a action="forumManage_editUI?id=%{id}">修改</s:a> <s:a action="forumManage_moveUp?id=%{id}">上移</s:a> <s:a action="forumManage_moveDown?id=%{id}">下移</s:a> </td> </tr> </s:iterator> </tbody> </table> <!-- 其他功能超链接 --> <div id="TableTail"> <div id="TableTail_inside"> <s:a action="forumManage_addUI"> <img src="${pageContext.request.contextPath}/style/images/createNew.png" /> </s:a> </div> </div> </div> </body> </html> |
saveUI.jsp:
|
<!--显示表单内容--> <div id="MainArea"> <s:form action="forumManage_%{id == null ? 'add' : 'edit'}"> <s:hidden name="id"></s:hidden> <div class="ItemBlock_Title1"><!-- 信息说明<DIV CLASS="ItemBlock_Title1"> <IMG BORDER="0" WIDTH="4" HEIGHT="7" SRC="${pageContext.request.contextPath}/style/blue/images/item_point.gif" /> 版块信息 </DIV> --> </div>
<!-- 表单内容显示 --> <div class="ItemBlockBorder"> <div class="ItemBlock"> <table cellpadding="0" cellspacing="0" class="mainForm"> <tr> <td width="100">版块名称</td> <td><s:textfield name="name" cssClass="InputStyle" /> *</td> </tr> <tr> <td>版块说明</td> <td><s:textarea name="description" cssClass="TextareaStyle"></s:textarea></td> </tr> </table> </div> </div>
<!-- 表单操作 --> <div id="InputDetailBar"> <input type="image" src="${pageContext.request.contextPath}/style/images/save.png"/> <a href="javascript:history.go(-1);"><img src="${pageContext.request.contextPath}/style/images/goBack.png"/></a> </div> </s:form> </div> </body> </html>
|
Struts.xml:
|
<!-- 版块管理 --> <action name="forumManage_*" class="forumManageAction" method="{1}"> <result name="list">/WEB-INF/jsp/forumManageAction/list.jsp</result> <result name="saveUI">/WEB-INF/jsp/forumManageAction/saveUI.jsp</result> <result name="toList" type="redirectAction">forumManage_list</result> </action> |
Tips:Struts.xml中name="forumManage_*"就得这么写,写成forum或其他的话会报错!!
上移和下移:
1，position的值不能重复。
2，列表显示时应按照positon的值排序（升序）。
3，上下移动就是与上面的或下面的Forum交换position的值。
思路:将position的值设置成和id值一样,这样数据库中所有数据就都是按position以升序排列(这是数据库的最初状态,进行上下移操作后就不一定了).想要将A上移,就是将A的position值和比A的position值小的所有数据中最大的那个值的position交换,在查询列表时,按position的某种顺序排列即可.
如:
select * from itcast_forum where position_ = (
select max(position_) from itcast_forum where position_<9
);
或者这样更好:
select * from itcast_forum where position_<9 order by position_ desc limit 0,1;
limit 0,1 意思是:从第一个数开始(第一个数下标为0),取一个数据.
ForumManageServiceImpl:
|
@Service @Transactional @SuppressWarnings("all") public class ForumManagerServiceImpl extends DaoSupportImpl<Forum> implements ForumManagerService {
/** * 重写findAll(),在查询列表时,按position的值排序 */ public List<Forum> findAll() { return getSession().createQuery(// "from Forum f order by f.position")// .list(); }
/** * 重写sava(),添加的同时设置position的值 */ public void save(Forum forum) { super.save(forum); // 设置position的值,可以用id值来设置 forum.setPosition(forum.getId().intValue()); }
/** * 上移 */ public void moveUp(Long id) { // 获取要交换位置号的对象 Forum forum = getById(id); Forum other = (Forum) getSession().createQuery(// "from Forum f where f.position < ? order by f.position desc")// .setParameter(0, forum.getPosition())// .setFirstResult(0)// .setMaxResults(1)// .uniqueResult();
// 最上面的不能上移 if (other == null) { return; }
// 设置position的值 int temp = forum.getPosition(); forum.setPosition(other.getPosition()); other.setPosition(temp);
// 更新到数据库 getSession().update(forum); getSession().update(other); }
/** * 下移 */ public void moveDown(Long id) { // 获取要交换位置号的对象 Forum forum = getById(id); Forum other = (Forum) getSession().createQuery(// "from Forum f where f.position > ? order by f.position asc")// .setParameter(0, forum.getPosition())// .setFirstResult(0)// .setMaxResults(1)// .uniqueResult();
// 最下面的不能下移 if (other == null) { return; }
// 设置position的值 int temp = forum.getPosition(); forum.setPosition(other.getPosition()); other.setPosition(temp);
// 更新到数据库 getSession().update(forum); getSession().update(other); }
} |
Tips:重写save()时,在保存之前id为null,保存之后id就有值了.因为是持久化对象,所有就算是在保存之后再设置position值,它也能自动更新到数据库(而不需要再保存一次).因为id是Long(封装数据类型),而position是int(原始数据类型),所以要转型:intValue().若是原始数据类型之间相互转换,强转即可.这些数据类型都是number的子类,number中有如下方法(查看方法:ctrl+shift+T找出Number类,再ctrl+O查看它所以的方法):
页面效果:
List.jsp:
|
<div id="MainArea"> <table cellspacing="0" cellpadding="0" class="TableStyle">
<!-- 表头--> <thead> <tr align="CENTER" valign="MIDDLE" id="TableTitle"> <td width="250px">版块名称</td> <td width="300px">版块说明</td> <td>相关操作</td> </tr> </thead>
<!--显示数据列表--> <tbody id="TableData" class="dataContainer" datakey="forumList"> <s:iterator value="forumList" status="status"> <tr class="TableDetail1 template"> <td>${name} </td> <td>${description} </td> <td><s:a action="forumManage_delete?id=%{id}" onClick="return delConfirm()">删除</s:a> <s:a action="forumManage_editUI?id=%{id}">修改</s:a>
<!-- 最上面的不能上移 status是在map中的,所以要加#--> <s:if test="#status.first"> <span style="color: gray; cursor: pointer">上移</span> </s:if> <s:else> <s:a action="forumManage_moveUp?id=%{id}">上移</s:a> </s:else>
<!-- 最下面的不能下移 --> <s:if test="#status.last"> <span style="color: gray; cursor: pointer">下移</span> </s:if> <s:else> <s:a action="forumManage_moveDown?id=%{id}">下移</s:a> </s:else> </td> </tr> </s:iterator> </tbody> </table>
<!-- 其他功能超链接 --> <div id="TableTail"> <div id="TableTail_inside"> <s:a action="forumManage_addUI"> <img src="${pageContext.request.contextPath}/style/images/createNew.png" /> </s:a> </div> </div> </div> |
三.设计实体,写JavaBean,添加映射
需求页面:
实体类图:
Froum中的topicCount和articleCount是特殊字段,这么设计是为了额提高效率.Topic与User和Reply与User都是多对一关系,采用单向关联,目的也是为了提高效率.删除某一回复,不会真的删除,而是给它做个已删除的标记.Topic,Reply与Article只是在JavaBean中存在继承关系,在数据库中没有Article这张表.
Article.java:
|
/** * 实体:文章 * @author Tan * */ public abstract class Article {
private Long id; private String content; //内容(TEXT类型) private Date postTime; //发表时间 private String ipAddr; //ip地址
private User author; //作者 …… } |
Topic.java:
|
/** * 实体:主贴 * @author Tan * */ public class Topic extends Article{
/** 普通贴 */ public static final int TYPE_NORMAL = 0; /** 精品贴 */ public static final int TYPE_BEST = 1; /** 置顶贴 */ public static final int TYPE_TOP = 2;
private String title; //标题 private int type; //类型 private int replyCount; //回复数量 private Date lastUpdate; //最后文章的发表时间
private Forum forum; //版块 主贴与版块:多对一 private Set<Reply> replies = new HashSet<Reply>(); //回复 主贴与回复:多对一 private Reply lastReply; //最后回复 …… } |
Topic.hbm.xml:
|
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN" "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd"> <hibernate-mapping package="cn.itcast.oa.domain"> <class name="Topic" table="itcast_topic"> <id name="id"> <generator class="native"></generator> </id> <!-- 内容应是大文本类型,以为在mysql中,大文本也有很多类型,所以要指定length属性 --> <property name="content" column="content" type="text" length="60000"></property> <!-- 发表时间采用timestamp类型 --> <property name="postTime" column="postTime" type="timestamp"></property> <property name="ipAddr" column="ipAddr"></property> <property name="title" column="title"></property> <property name="type" column="type"></property> <property name="replyCount" column="replyCount"></property> <property name="lastUpdate" column="lastUpdate" type="timestamp"></property>
<!-- author属性,表示我与User的多对一关系 --> <many-to-one name="author" class="User" column="authorId"></many-to-one>
<!-- forum属性,表示我与Forum的多对一关系 --> <many-to-one name="forum" class="Forum" column="forumId"></many-to-one>
<!-- replies属性,表示我与Reply的一对多关系 --> <set name="replies"> <key column="topicId"></key> <one-to-many class="Reply"/> </set>
<!-- lastReply属性,表示我与Reply的一对一关系 采用基于外键的方式.本方有外键 --> <many-to-one name="lastReply" class="Reply" column="lastReplyId" unique="true"></many-to-one>
</class> </hibernate-mapping> |
Reply.java:
|
/** * 实体:回复 * @author Tan * */ public class Reply extends Article{
private boolean deleted; //删除标志 private Topic topic; //主贴回复与主贴:多对一 …… } |
Reply.hbm.xml:
|
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN" "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd"> <hibernate-mapping package="cn.itcast.oa.domain"> <class name="Reply" table="itcast_reply"> <id name="id"> <generator class="native"></generator> </id> <!-- 内容应是大文本类型,这是要指定length属性 --> <property name="content" column="content" type="text" length="60000"></property> <!-- 发表时间采用timestamp类型 --> <property name="postTime" column="postTime" type="timestamp"></property> <property name="ipAddr" column="ipAddr"></property> <property name="deleted" column="deleted"></property>
<!-- author属性,表示我与User的多对一关系 --> <many-to-one name="author" class="User" column="authorId"></many-to-one>
<!-- topic属性,表示我与Topic的多对一关系 --> <many-to-one name="topic" class="Topic" column="topicId"></many-to-one> </class> </hibernate-mapping> |
Forum.java:
|
/** * 实体:论坛版块 * @author Tan * */ public class Forum {
private Long id; private String name; private String description; private int topicCount; //主贴数量 private int articleCount; //文章数量:主贴数量+回复数量
private int position; //位置信息,用于上移下移操作 private Set<Topic> topics = new HashSet<Topic>(); //主贴数 版块与主贴:一对多 private Topic lastTopic; //最新主题 …… } |
Forum.hbm.xml:
|
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN" "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd"> <hibernate-mapping package="cn.itcast.oa.domain"> <class name="Forum" table="itcast_forum"> <id name="id"> <generator class="native"></generator> </id>
<property name="name" column="name"></property> <property name="description" column="description"></property> <property name="position" column="position_"></property> <property name="topicCount" column="topicCount"></property> <property name="articleCount" column="articleCount"></property>
<!-- topics属性,表达的是我与Topic对象的一对多关系 --> <set name="topics"> <key column="forumId"></key> <one-to-many class="Topic"/> </set>
<!-- lastTopic属性,表示我与Topic的一对一关系 采用基于外键的一对一映射.本方有外键 --> <many-to-one name="lastTopic" class="Topic" column="lastTopicId" unique="true"></many-to-one>
</class> </hibernate-mapping> |
四.表单验证:jquery的validate插件
说明：需要JQuery版本：1.2.6+
步骤：
1,导入的jQuery.js与jquery.validate.js等文件，注意顺序不要颠倒!!
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="jquery.metadata.js">
<script type="text/javascript" src="jquery.validate.js">
2, 指定哪个（或哪些）表单要在提交前先进行验证
<script type="text/javascript">
$(function(){
$("#testForm").validate();
});
</script>
3, 指定每个字段的验证规则
名称 *<input type="text" name="loginName" class="required">
其中class="required" 表示本字段必须要填写。
效果如下图：
实际操作:
为提高效率,可将前两步的代码抽取出来,写到公共页面中,接下来任何表单中的任何字段需要验证的话,在相应字段的class(cssClass)中加入验证规则即可.
Header.jsp:
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" src="${pageContext.request.contextPath}/script/jquery.js"></script> <script language="javascript" src="${pageContext.request.contextPath}/script/pageCommon.js" charset="utf-8"></script> <script language="javascript" src="${pageContext.request.contextPath}/script/PageUtils.js" charset="utf-8"></script> <script language="javascript" src="${pageContext.request.contextPath}/script/jquery_validate/jquery.metadata.js" charset="utf-8"></script> <script language="javascript" src="${pageContext.request.contextPath}/script/jquery_validate/jquery.validate.js" charset="utf-8"></script> <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/style/blue/pageCommon.css" />
<script type="text/javascript"> $(function(){ $("form").validate(); }); </script> |
如果想要对添加用户的表单中的用户名添加验证:
|
<tr><td>登录名</td> <td><s:textfield type="text" name="loginName" cssClass="InputStyle required {minlength:3,maxlength:10}"/> *（登录名要唯一）</td> </tr> |
页面效果:
1. 指定验证规则的方式
1.1. 把验证规则写到字段元素的class属性中
例：
用户名：<input type="password" name="password" class="required">
电子邮件：<input type="text" name="email" class="required email">
密码：<input type="password" name="password" id="password1"
class="{required: true, minlength: 3}">
再次输入密码：<input type="password" name="password2"
class="{equalTo:'[#password1]'} required">
以上用了两种方式：
1， 指定多个class名称（验证规则），多个class名称之间用空格隔开，如：class="required email"。
2， 使用JSON对象，指定多个属性，如：class="{required: true, minlength: 3}"。可以为某验证规则指定所用的参数，如minlength规则需要指定最小长度，这里为3。
3， 混合使用，如：class="{equalTo:'[#password1]'} required"。
说明：
1， 如果使用第2种方式（JSON对象），就必须引入：jquery.metadata.js，作用是解析JSON对象。
2， 如果表单字段的name不能重复，则只有最前面的配置起作用。
-
2. 可以使用哪些验证规则（内置的验证规则）
|
required:true |
必填字段 |
|
remote:"/checkName.do" |
使用ajax方式访问"/checkName.do"，通过返回true或false表示输入值通过或未通过验证 |
|
email:true |
必须输入正确格式的电子邮件 |
|
url:true |
必须输入正确格式的网址 |
|
date:true |
必须输入正确格式的日期 |
|
dateISO:true |
必须输入正确格式的日期(ISO)，例如：2010-01-01，2010/01/01 只验证格式，不验证有效性 |
|
number:true |
必须输入合法的数字(负数，小数) |
|
digits:true |
必须输入整数 |
|
creditcard: |
必须输入合法的信用卡号 |
|
equalTo:"expr" |
输入值必须和$("expr").val()的值相同， |
|
accept: "gif|png|jpg" |
输入拥有合法后缀名的字符串（上传文件的后缀），多个后缀之间用'|'隔开 |
|
maxlength:5 |
输入长度最多是5的字符串(汉字算一个字符) |
|
minlength:3 |
输入长度最小是3的字符串(汉字算一个字符) |
|
rangelength:[5,10] |
输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) |
|
range:[5,10] |
输入值必须介于 5 和 10 之间 |
|
max:5 |
输入值不能大于5 |
|
min:10 |
输入值不能小于10 |
说明：
1， remote是远程验证。比如注册验证用户名是否已被注册，返回值只能是true（验证成功）或false（验证失败）。在访问指定的url时，会自动把当前字段的值做为参数传递过去（以字段的name值为key，value为参数值）。
2， 例如使用remote验证用户名是否存在，当添加一个用户后，在当前窗口中（同一个窗口），再次添加一个同名的用户，validate不能提示该用户已存在，这是因为缓存的原因，jquery仍认为该用户名可用。解决方法是在页面中添加如下代码：
$().ready(function(){
$.ajaxSetup ({
cache: false //关闭ajax相应的缓存
});
});
3， 某些属性值中的引号不能省略，否则出错。如accept、equalTo等，因为这时他需要的是一个字符串。
3. 有关错误提示消息
- 3.1. 更改默认的错误提示消息(直接插入那段script代码即可,详见下面的代码)
jQuery.extend(jQuery.validator.messages, {
required: "请填写本字段",
remote: "验证失败",
email: "请输入正确的电子邮件",
url: "请输入正确的网址",
date: "请输入正确的日期",
dateISO: "请输入正确的日期 (ISO).",
number: "请输入正确的数字",
digits: "请输入正确的整数",
creditcard: "请输入正确的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入指定的后缀名的字符串",
maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"),
minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"),
rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"),
range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});
实际操作:
Header.jsp:
|
…… <script type="text/javascript"> $(function(){ jQuery.extend(jQuery.validator.messages, { required: "请填写本字段", remote: "验证失败", email: "请输入正确的电子邮件", url: "请输入正确的网址", date: "请输入正确的日期", dateISO: "请输入正确的日期 (ISO).", number: "请输入正确的数字", digits: "请输入正确的整数", creditcard: "请输入正确的信用卡号", equalTo: "请再次输入相同的值", accept: "请输入指定的后缀名的字符串", maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"), minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"), rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"), range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"), max: jQuery.validator.format("请输入一个最大为 {0} 的值"), min: jQuery.validator.format("请输入一个最小为 {0} 的值") });
$("form").validate(); }); </script> |
- 3.2. 仅对当前表单改变提示消息
方法一：在class中指定某验证规则的错误消息
<input type="file" name="parResource"
class="{
required: true, accept: 'zip',
messages: {required: '请选择文件', accept:'请选择正确的文件'}
}"> （提示：使用时不能换行）
方法二：在调用validate()方法时指定某验证规则的错误消息
$(function() {
$("#myForm").validate({
messages:{
username:{ required: "请填写用户名" },
email: { required: '请填写email', email: "请填写正确的email"}
}
});
});
实际操作:
用户的saveUI.jsp:
|
<tr><td>登录名</td> <td><s:textfield type="text" name="loginName" cssClass="InputStyle required {minlength:3, maxlength:10, messages:{required:'请填写用户名!!!'}}"/> *登录名要唯一） </td> </tr> |
效果:
- 3.3. 设置错误消息的显示样式
指定label.error的样式就可以了，如下：
<style type="text/css">
label.error{
margin-left: 10px;
color: red;
}
</style>
说明：label.error指class为error的label元素，如：
<label for="username" class="error">
实际操作:
首先找到相应错误消息提示在代码中的具体信息:(这是火狐浏览器)
由此可知,它在laber标签中,class名字叫error.然后在herder.jsp中添加指定样式:
Header.jsp:
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" src="${pageContext.request.contextPath}/script/jquery.js"></script> <script language="javascript" src="${pageContext.request.contextPath}/script/pageCommon.js" charset="utf-8"></script> <script language="javascript" src="${pageContext.request.contextPath}/script/PageUtils.js" charset="utf-8"></script> <script language="javascript" src="${pageContext.request.contextPath}/script/jquery_validate/jquery.metadata.js" charset="utf-8"></script> <script language="javascript" src="${pageContext.request.contextPath}/script/jquery_validate/jquery.validate.js" charset="utf-8"></script> <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/style/blue/pageCommon.css" />
<script type="text/javascript"> $(function(){ jQuery.extend(jQuery.validator.messages, { required: "请填写本字段", remote: "验证失败", email: "请输入正确的电子邮件", url: "请输入正确的网址", date: "请输入正确的日期", dateISO: "请输入正确的日期 (ISO).", number: "请输入正确的数字", digits: "请输入正确的整数", creditcard: "请输入正确的信用卡号", equalTo: "请再次输入相同的值", accept: "请输入指定的后缀名的字符串", maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"), minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"), rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"), range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"), max: jQuery.validator.format("请输入一个最大为 {0} 的值"), min: jQuery.validator.format("请输入一个最小为 {0} 的值") });
$("form").validate(); }); </script> <style type="text/css"> label.error{ font-weight: bold; } </style> |
页面效果: (这里效果为加粗)
扫一扫
1104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
