Unix-2-CRUD-分页+模糊查询-状态更改

框架:spring+springMVC+myBatis

jar包



applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"

xmlns:jdbc="http://www.springframework.org/schema/jdbc"
xmlns:jee="http://www.springframework.org/schema/jee"

xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:util="http://www.springframework.org/schema/util"
xmlns:jpa="http://www.springframework.org/schema/data/jpa"
xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.2.xsd http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-3.2.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd http://www.springframework.org/schema/data/jpa http://www.springframework.org/schema/data/jpa/spring-jpa-1.3.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-3.2.xsd">
<!-- 一.整合myBatis:1.2.3 -->
<!-- 1.导入连接数据库的文件 -->
<util:properties id="jdbc" location="classpath:jdbc.properties"/>
<!-- 2.数据库连接池 -->
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
<!-- 连接数据库四要素 -->
<property name="url" value="#{jdbc.url}"/>
<property name="driverClassName" value="#{jdbc.driver}"/>
<property name="username" value="#{jdbc.user}"/>
<property name="password" value="#{jdbc.password}"/>
</bean>
<!-- 3.配置sqlSessionFactoryBean -->
<bean id="SqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<!--3.1引入ds数据源-->
<property name="dataSource" ref="dataSource"/>
<!--3.2映射路径:mapperLocations-->
<property name="mapperLocations" value="classpath:com/lanou3g/entity/*.xml"/>
</bean>

<!-- 二.整合Spring:4.5.6
spring整合其他2大框架:各种组件,同时运行,是一个多线程
-->
<!-- 4.加入myBatis注解:MapperScannerConfigurer -->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<!-- 4.1扫描dao包 -->
<property name="basePackage" value="com.lanou3g.dao"/>
<!-- 4.2注解类:包名.注解类名 -->
<property name="annotationClass" value="com.lanou3g.annotation.MyBatisDao"/>
</bean>
<!-- 5.开启注解扫描 -->
<context:component-scan base-package="com.lanou3g"/>

<!-- 省略了开启mvc注解,用com.lanou3g.annotation.MyBatisDao.@interface自定义注解 -->

<!-- 6.开启MVC注解驱动 -->
<mvc:annotation-driven />

<!-- 三.整合springMVC:7 -->
<!-- 7.配置springMVC,处理请求转发,使用"国际资源视图解析器" -->
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/"/>
<property name="suffix" value=".jsp"/>
</bean>

</beans>

jdbc.properties

url=jdbc:oracle:thin:@localhost:1521:orcl
driver=oracle.jdbc.OracleDriver
user=lanou3g
password=lanou3g

实体类

Account.java

package com.lanou3g.entity;

import java.sql.Date;
import java.sql.Timestamp;

public class Account {

private Integer id;
private Integer recommender_id;
private String login_name;
private String login_passwd;
private String status;
private Timestamp create_date;
private Timestamp pause_date;
private Timestamp close_date;
private String real_name;
private String idcard_no;
private Date birthdate;
private String gender;
private String occupation;
private String telephone;
private String email;
private String mailaddress;
private String zipcode;
private String qq;
private Timestamp last_login_time;
private String last_login_ip;

//�Ƽ������֤��
private String recommender_idcardno;

@Override
public String toString() {
return "Account [id=" + id + ", recommender_id=" + recommender_id
+ ", login_name=" + login_name + ", login_passwd="
+ login_passwd + ", status=" + status + ", create_date="
+ create_date + ", pause_date=" + pause_date + ", close_date="
+ close_date + ", real_name=" + real_name + ", idcard_no="
+ idcard_no + ", birthdate=" + birthdate + ", gender=" + gender
+ ", occupation=" + occupation + ", telephone=" + telephone
+ ", email=" + email + ", mailaddress=" + mailaddress
+ ", zipcode=" + zipcode + ", qq=" + qq + ", last_login_time="
+ last_login_time + ", last_login_ip=" + last_login_ip
+ ", recommender_idcardno=" + recommender_idcardno + "]";
}

public String getRecommender_idcardno() {
return recommender_idcardno;
}

public void setRecommender_idcardno(String recommenderIdcardno) {
recommender_idcardno = recommenderIdcardno;
}

public Integer getId() {
return id;
}

public void setId(Integer id) {
this.id = id;
}

public Integer getRecommender_id() {
return recommender_id;
}

public void setRecommender_id(Integer recommender_id) {
this.recommender_id = recommender_id;
}

public String getLogin_name() {
return login_name;
}

public void setLogin_name(String login_name) {
this.login_name = login_name;
}

public String getLogin_passwd() {
return login_passwd;
}

public void setLogin_passwd(String login_passwd) {
this.login_passwd = login_passwd;
}

public String getStatus() {
return status;
}

public void setStatus(String status) {
this.status = status;
}

public Timestamp getCreate_date() {
return create_date;
}

public void setCreate_date(Timestamp create_date) {
this.create_date = create_date;
}

public Timestamp getPause_date() {
return pause_date;
}

public void setPause_date(Timestamp pause_date) {
this.pause_date = pause_date;
}

public Timestamp getClose_date() {
return close_date;
}

public void setClose_date(Timestamp close_date) {
this.close_date = close_date;
}

public String getReal_name() {
return real_name;
}

public void setReal_name(String real_name) {
this.real_name = real_name;
}

public String getIdcard_no() {
return idcard_no;
}

public void setIdcard_no(String idcard_no) {
this.idcard_no = idcard_no;
}

public Date getBirthdate() {
return birthdate;
}

public void setBirthdate(Date birthdate) {
this.birthdate = birthdate;
}

public String getGender() {
return gender;
}

public void setGender(String gender) {
this.gender = gender;
}

public String getOccupation() {
return occupation;
}

public void setOccupation(String occupation) {
this.occupation = occupation;
}

public String getTelephone() {
return telephone;
}

public void setTelephone(String telephone) {
this.telephone = telephone;
}

public String getEmail() {
return email;
}

public void setEmail(String email) {
this.email = email;
}

public String getMailaddress() {
return mailaddress;
}

public void setMailaddress(String mailaddress) {
this.mailaddress = mailaddress;
}

public String getZipcode() {
return zipcode;
}

public void setZipcode(String zipcode) {
this.zipcode = zipcode;
}

public String getQq() {
return qq;
}

public void setQq(String qq) {
this.qq = qq;
}

public Timestamp getLast_login_time() {
return last_login_time;
}

public void setLast_login_time(Timestamp last_login_time) {
this.last_login_time = last_login_time;
}

public String getLast_login_ip() {
return last_login_ip;
}

public void setLast_login_ip(String last_login_ip) {
this.last_login_ip = last_login_ip;
}

}

分页

Page.java

package com.lanou3g.util;

public class Page {
//每页数据量
private int pageSize=4;

//当前页码数
private int  currentPage=1;

private int begin;
private int end;
//数据总行数
private int rows;
//总页数
private int totalPage;

public Page() {
super();
// TODO Auto-generated constructor stub
}

public Page(int currentPage,int rows) {
begin = (currentPage - 1) * pageSize +1;
end =  currentPage * pageSize;
totalPage = (rows - 1) / pageSize + 1;
this.currentPage = currentPage;
this.rows = rows;
}

public int getPageSize() {
return pageSize;
}

public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}

public int getCurrentPage() {
return currentPage;
}

public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}

public int getBegin() {
return (currentPage - 1) * pageSize +1;
}

public void setBegin(int begin) {
this.begin = begin;
}

public int getEnd() {
return currentPage * pageSize;
}

public void setEnd(int end) {
this.end = end;
}

public int getRows() {
return rows;
}

public void setRows(int rows) {
this.rows = rows;
}

public int getTotalPage() {
return (rows - 1) / pageSize + 1;
}

public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}

}

实体类映射

AccountMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.lanou3g.dao.AccountDao">
<!-- //查询总个数(模糊查询条件)
Integer getRows(AccountPage page); -->
<select id="getRows" parameterType="com.lanou3g.entity.page.AccountPage" resultType="Integer">
select count(1) from account
<where>
<if test="idcard_no != null and idcard_no.length()>0 ">
and idcard_no like '%'||#{idcard_no,jdbcType=NUMERIC}||'%'
</if>
<if test="real_name != null and real_name.length()>0">
and real_name like '%'||#{real_name,jdbcType=VARCHAR}||'%'
</if>
<if test="login_name != null and login_name.length()>0">
and login_name like '%'||#{login_name,jdbcType=VARCHAR}||'%'
</if>
<if test="status != null and status.length()>0">
and status = #{status}
</if>
</where>
</select>

<!-- //根据查询的总个数进行分页(模糊查询条件)
List<Account> findByPage(AccountPage page); -->
<select id="findByPage" parameterType="com.lanou3g.entity.page.AccountPage" resultType="com.lanou3g.entity.Account">
select * from ( select a.*,rownum r from ( select * from account
<where>
<if test="idcard_no != null && idcard_no.length()>0 ">
and idcard_no like '%'||#{idcard_no}||'%'
</if>
<if test="real_name != null && real_name.length()>0">
and real_name like '%'||#{real_name}||'%'
</if>
<if test="login_name != null && login_name.length()>0">
and login_name like '%'||#{login_name}||'%'
</if>
<if test="status != null && !status.equals('-1') ">
and status = #{status}
</if>
</where>
order by id ) a )
where r between #{begin} and #{end}
</select>

<insert id="add" parameterType="com.lanou3g.entity.Account">
insert into account
(id,REAL_NAME,IDCARD_NO,LOGIN_NAME,
LOGIN_PASSWD,TELEPHONE,
RECOMMENDER_ID,BIRTHDATE,
EMAIL,OCCUPATION,GENDER,
MAILADDRESS,ZIPCODE,QQ,STATUS)
values
(ACCOUNT_SEQ.nextval,#{real_name},#{idcard_no},#{login_name},
#{login_passwd},#{telephone},
#{recommender_id,jdbcType=NUMERIC},#{birthdate},
#{email,jdbcType=VARCHAR},#{occupation,jdbcType=VARCHAR},#{gender,jdbcType=VARCHAR},
#{mailaddress,jdbcType=VARCHAR},#{zipcode,jdbcType=VARCHAR},#{qq,jdbcType=VARCHAR},1
)
</insert>

<update id="updateStatus" parameterType="com.lanou3g.entity.Account">
update account set status=#{status},
<choose>
<when test="status==0">
pause_date=null
</when>
<when test="status==1">
pause_date=SYSDATE
</when>
<otherwise>
close_date=SYSDATE
</otherwise>
</choose>
where id=#{id}
</update>

<update id="delete" parameterType="com.lanou3g.entity.Account">
update account set status=#{status},close_date=SYSDATE where id=#{id}
</update>

<select id="findById" resultType="com.lanou3g.entity.Account">
select * from account where id=#{id}
</select>

<update id="update" parameterType="com.lanou3g.entity.Account">
update account
<set>
real_name=#{real_name},telephone=#{telephone},
occupation=#{occupation},gender=#{gender},
<if test="recommender_id != null && recommender_id.length()>0 ">
recommender_id=#{recommender_id},
</if>
<if test="email != null && email.length()>0 ">
email=#{email},
</if>
<if test="mailaddress != null && mailaddress.length()>0 ">
mailaddress = #{mailaddress},
</if>
<if test="zipcode != null && zipcode.length()>0 ">
zipcode = #{zipcode},
</if>
<if test="qq != null && qq.length()>0 ">
qq =#{qq},
</if>
</set>
where id=#{id}
</update>

</mapper>

自定义接口

MyBatisDao.java

package com.lanou3g.annotation;
/**
*
* @author lanou3g
*
* 开发SpringMVC支持的自定义注解:
* 1.new接口
* 2.在接口前+@
*
*
*/
public  @interface MyBatisDao {

}

dao层
AccountDao.java

package com.lanou3g.dao;

import java.util.List;

import com.lanou3g.annotation.MyBatisDao;
import com.lanou3g.entity.Account;
import com.lanou3g.entity.page.AccountPage;

@MyBatisDao
public interface AccountDao {

//查询总个数(模糊查询条件)
Integer getRows(AccountPage page);

//根据查询的总个数进行分页(模糊查询条件)
List<Account> findByPage(AccountPage page);

//增加
void add(Account account);

//更改状态
void updateStatus(Account account);

//删除
void delete(Account account);

//修改
void update(Account account);

//根据id查对象
Account findById(Integer id);
}

controller层

AccountController.java

package com.lanou3g.dao;

import java.util.List;

import com.lanou3g.annotation.MyBatisDao;
import com.lanou3g.entity.Account;
import com.lanou3g.entity.page.AccountPage;

@MyBatisDao
public interface AccountDao {

//查询总个数(模糊查询条件)
Integer getRows(AccountPage page);

//根据查询的总个数进行分页(模糊查询条件)
List<Account> findByPage(AccountPage page);

//增加
void add(Account account);

//更改状态
void updateStatus(Account account);

//删除
void delete(Account account);

//修改
void update(Account account);

//根据id查对象
Account findById(Integer id);
}

JSP页面

显示全部

account_list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>云科技</title>
<link type="text/css" rel="stylesheet" media="all" href="${pageContext.request.contextPath }/styles/global.css" />
<link type="text/css" rel="stylesheet" media="all" href="${pageContext.request.contextPath }/styles/global_color.css" />
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.2.1.min.js"></script>
<script language="javascript" type="text/javascript">
//删除
function deleteAccount(id) {
var r = window.confirm("确定要删除此账务账号吗？\r\n删除后将不能恢复，且会删除其下属的所有业务账号。");
window.location.href="delete.do?id="+id;
}
//开通或暂停
function setState(num,id) {
if(num==0){
var r = window.confirm("确定要暂停此账务账号吗？");
window.location.href="pauseAccount.do?id="+id;
}
if(num==1){
var r = window.confirm("确定要开通此账务账号吗？");
window.location.href="startAccount.do?id="+id;
}
}
</script>
</head>
<body>
<!--Logo区域开始-->
<div id="header">
<img src="../images/logo.png" alt="logo" class="left"/>
<a href="#">[退出]</a>
</div>
<!--Logo区域结束-->
<!--导航区域开始-->
<div id="navi">
<ul id="menu">
<li><a href="../index.html" class="index_off"></a></li>
<li><a href="../role/role_list.html" class="role_off"></a></li>
<li><a href="../admin/admin_list.html" class="admin_off"></a></li>
<li><a href="${pageContext.request.contextPath }/cost/findCost.do" class="fee_off"></a></li>
<li><a href="${pageContext.request.contextPath }/account/findAccount.do" class="account_on"></a></li>
<li><a href="../service/service_list.html" class="service_off"></a></li>
<li><a href="../bill/bill_list.html" class="bill_off"></a></li>
<li><a href="../report/report_list.html" class="report_off"></a></li>
<li><a href="../user/user_info.html" class="information_off"></a></li>
<li><a href="../user/user_modi_pwd.html" class="password_off"></a></li>
</ul>
</div>
<!--导航区域结束-->
<!--主要区域开始-->
<div id="main">
<form action="${pageContext.request.contextPath }/account/findAccount.do" method="post">
<!--查询-->
<div class="search_add">
<!-- 由于带条件的查询,直接点击分页跳转会导致查询条件丢失,所以
将当前页码数存在表单中,页码直接提交表单document.forms[0].submit();即可
-->
<input type="hidden" name="currentPage" value="1" id="currentPage" />

<div>身份证：<input type="text" value="${page.idcard_no}" class="text_search" name="idcard_no" /></div>
<div>姓名：<input type="text" value="${page.real_name}" class="width70 text_search"  name="real_name" /></div>
<div>登录名：<input type="text"  value="${page.login_name}" class="text_search" name="login_name" /></div>
<div>
状态：
<select class="select_search" name="status">
<option value="-1">全部</option>
<option value="0" <c:if test="${page.status == 0 }">selected</c:if> >开通 </option>
<option value="1" <c:if test="${page.status == 1 }">selected</c:if>>暂停</option>
<option value="2" <c:if test="${page.status == 2 }">selected</c:if>>删除</option>
</select>
</div>
<div><input type="submit" value="搜索" class="btn_search" /></div>
<input type="button" value="增加" class="btn_add" onclick="location.href='${pageContext.request.contextPath }/account/preAdd.do';" />
</div>
<!--删除等的操作提示-->
<div id="operate_result_info" class="operate_success">
<img src="../images/close.png" onclick="this.parentNode.style.display='none';" />
删除成功，且已删除其下属的业务账号！
</div>
<!--数据区域：用表格展示数据-->
<div id="data">
<table id="datalist">
<tr>
<th>账号ID</th>
<th>姓名</th>
<th class="width150">身份证</th>
<th>登录名</th>
<th>状态</th>
<th class="width100">创建日期</th>
<th class="width150">上次登录时间</th>
<th class="width200"></th>
</tr>
<c:forEach items="${accounts}" var="a">
<tr>
<td>${a.id }</td>
<td><a href="account_detail.html">${a.real_name }</a></td>
<td>${a.idcard_no }</td>
<td>${a.login_name }</td>
<c:choose>
<c:when test="${a.status == 0}">
<td>开通</td>
</c:when>
<c:when test="${a.status == 1}">
<td>暂停</td>
</c:when>
<c:otherwise>
<td>删除</td>
</c:otherwise>
</c:choose>
<td><fmt:formatDate value="${a.create_date}" pattern="yyyy-MM-dd"/></td>
<td><fmt:formatDate value="${a.last_login_time}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
<td class="td_modi">
<c:choose>
<c:when test="${a.status == 0}">
<input type="button" value="暂停" class="btn_pause" onclick="setState(${a.status},${a.id });" />
<input type="button" value="修改" class="btn_modify" onclick="location.href='preUpdate.do?id=${a.id}';" />
<input type="button" value="删除" class="btn_delete" onclick="deleteAccount(${a.id});" />
</c:when>
<c:when test="${a.status == 1}">
<input type="button" value="开通" class="btn_start" onclick="setState(${a.status},${a.id });" />
<input type="button" value="修改" class="btn_modify" onclick="location.href='preUpdate.do?id=${a.id}';" />
<input type="button" value="删除" class="btn_delete" onclick="deleteAccount(${a.id});" />
</c:when>
</c:choose>
</td>
</tr>
</c:forEach>
</table>
<p>业务说明：<br />
1、创建则开通，记载创建时间；<br />
2、暂停后，记载暂停时间；<br />
3、重新开通后，删除暂停时间；<br />
4、删除后，记载删除时间，标示为删除，不能再开通、修改、删除；<br />
5、暂停账务账号，同时暂停下属的所有业务账号；<br />
6、暂停后重新开通账务账号，并不同时开启下属的所有业务账号，需要在业务账号管理中单独开启；<br />
7、删除账务账号，同时删除下属的所有业务账号。</p>
</div>
<!--分页-->
<div id="pages">
<a onclick="showPage(1)" >首页</a>

<a <c:if test="${page.currentPage > 1}"> onclick="showPage(${page.currentPage-1})" </c:if>  >上一页</a>

<c:forEach begin="1" end="${page.totalPage}" var="i" step="1">
<a onclick="showPage(${i})" class="page" >${i}</a>
</c:forEach>

<a <c:if test="${page.currentPage  != page.totalPage}"> onclick="showPage(${page.currentPage+1})" </c:if> >下一页</a>

<a onclick="showPage(${page.totalPage})">末页</a>
</div>
</form>
</div>
<!--主要区域结束-->
<div id="footer">
<p>[源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</p>
<p>版权所有(C)云科技有限公司 </p>
</div>
<script type="text/javascript">
$(function(){
$(".page").eq(${page.currentPage-1}).addClass("current_page").siblings().removeClass("current_page");
});
function showPage(currentPage){
$("#currentPage").val(currentPage);
document.forms[0].submit();
}
</script>
</body>
</html>

添加页面

account_add.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" media="all" href="../styles/global.css" />
<link type="text/css" rel="stylesheet" media="all" href="../styles/global_color.css" />
<script language="javascript" type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script language="javascript" type="text/javascript">
//校验身份证
function check_idcardno(idcardno) {
//重置生日
$("#birthdate").val("");

//如果身份证为空，则给出提示
if(idcardno == ""){
$("#idcardno_msg").text("身份证号不能为空！").addClass("error_msg");
return;
}

//如果身份证格式不对，则给出提示
var reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/;
if(!reg.test(idcardno)){
$("#idcardno_msg").text("身份证号格式不正确！").addClass("error_msg");
return;
}

//校验通过，给予提示，并移除错误样式
$("#idcardno_msg").text("有效的身份证号").removeClass("error_msg");

//根据身份证提取出生日，赋值给生日字段
var birthdate = idcardno.substring(6,10) + "-" + idcardno.substring(10,12) + "-" + idcardno.substring(12,14);
$("#birthdate").val(birthdate);
}
//查询推荐人ID
function search_recommender() {
//重置recommender_id
$("#recommender_id").val("");

//如果身份证为空，则返回
var idcardno = $("#recommender_idcardno").val();
if(idcardno == ""){
$("#recommender_msg").text("正确的身份证号码格式").removeClass("error_msg");
return;
}

//如果身份证格式不对，则给出提示
var reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/;
if(!reg.test(idcardno)){
$("#recommender_msg").text("身份证号格式不正确！").addClass("error_msg");
return;
}

//以后用Ajax传值
}

//保存成功的提示信息
function showResult() {
showResultDiv(true);
window.setTimeout("showResultDiv(false);", 3000);
}
function showResultDiv(flag) {
var divResult = document.getElementById("save_result_info");
if (flag)
divResult.style.display = "block";
else
divResult.style.display = "none";
}

//显示选填的信息项
function showOptionalInfo(imgObj) {
var div = document.getElementById("optionalInfo");
if (div.className == "hide") {
div.className = "show";
imgObj.src = "../images/hide.png";
}
else {
div.className = "hide";
imgObj.src = "../images/show.png";
}
}
</script>
</head>
<body>
<!--Logo区域开始-->
<div id="header">
<img src="../images/logo.png" alt="logo" class="left"/>
<a href="#">[退出]</a>
</div>
<!--Logo区域结束-->
<!--导航区域开始-->
<div id="navi">
<ul id="menu">
<li><a href="../index.html" class="index_off"></a></li>
<li><a href="../role/role_list.html" class="role_off"></a></li>
<li><a href="../admin/admin_list.html" class="admin_off"></a></li>
<li><a href="${pageContext.request.contextPath }/cost/findCost.do" class="fee_off"></a></li>
<li><a href="${pageContext.request.contextPath }/account/findAccount.do" class="account_on"></a></li>
<li><a href="../service/service_list.html" class="service_off"></a></li>
<li><a href="../bill/bill_list.html" class="bill_off"></a></li>
<li><a href="../report/report_list.html" class="report_off"></a></li>
<li><a href="../user/user_info.html" class="information_off"></a></li>
<li><a href="../user/user_modi_pwd.html" class="password_off"></a></li>
</ul>

</div>
<!--导航区域结束-->
<!--主要区域开始-->
<div id="main">
<!--保存成功或者失败的提示消息-->
<div id="save_result_info" class="save_fail">保存失败，该身份证已经开通过账务账号！</div>
<form action="${pageContext.request.contextPath }/account/add.do" method="post" class="main_form">
<!--必填项-->
<div class="text_info clearfix"><span>姓名：</span></div>
<div class="input_info">
<input type="text" name="real_name" />
<span class="required">*</span>
<div class="validate_msg_long">20长度以内的汉字、字母和数字的组合</div>
</div>
<div class="text_info clearfix"><span>身份证：</span></div>
<div class="input_info">
<input type="text" name="idcard_no" onblur="check_idcardno(this.value);"/>
<span class="required">*</span>
<div class="validate_msg_long" id="idcardno_msg">正确的身份证号码格式</div>
</div>
<div class="text_info clearfix"><span>登录账号：</span></div>
<div class="input_info">
<input type="text" name="login_name" />
<span class="required">*</span>
<div class="validate_msg_long">30长度以内的字母、数字和下划线的组合</div>
</div>
<div class="text_info clearfix"><span>密码：</span></div>
<div class="input_info">
<input type="password" name="login_passwd" />
<span class="required">*</span>
<div class="validate_msg_long">30长度以内的字母、数字和下划线的组合</div>
</div>
<div class="text_info clearfix"><span>重复密码：</span></div>
<div class="input_info">
<input type="password"  />
<span class="required">*</span>
<div class="validate_msg_long">两次密码必须相同</div>
</div>
<div class="text_info clearfix"><span>电话：</span></div>
<div class="input_info">
<input type="text" class="width200" name="telephone"/>
<span class="required">*</span>
<div class="validate_msg_medium">正确的电话号码格式：手机或固话</div>
</div>
<!--可选项-->
<div class="text_info clearfix"><span>可选项：</span></div>
<div class="input_info">
<img src="../images/show.png" alt="展开" onclick="showOptionalInfo(this);" />
</div>
<div id="optionalInfo" class="hide">
<div class="text_info clearfix"><span>推荐人身份证号码：</span></div>
<div class="input_info">
<input type="text" id="recommender_idcardno" onblur="search_recommender();"/>
<input type="hidden" name="recommender_id" id="recommender_id"/>
<div class="validate_msg_long" id="recommender_msg">正确的身份证号码格式</div>
</div>
<div class="text_info clearfix"><span>生日：</span></div>
<div class="input_info">
<input type="text" name="birthdate" readonly class="readonly" id="birthdate"/>
</div>
<div class="text_info clearfix"><span>Email：</span></div>
<div class="input_info">
<input type="text" class="width350" name="email"/>
<div class="validate_msg_tiny">50长度以内，合法的 Email 格式</div>
</div>

<div class="text_info clearfix"><span>职业：</span></div>
<div class="input_info">
<select name="occupation">
<option value="">全部</option>
<option value="1">干部</option>
<option value="2">学生</option>
<option value="3">技术人员</option>
<option value="4">其他</option>
</select>
</div>
<div class="text_info clearfix"><span>性别：</span></div>
<div class="input_info fee_type">
<input type="radio" name="gender" value="1" checked="checked" id="female" />
<label for="female">女</label>
<input type="radio" name="gender" value="0" id="male" />
<label for="male">男</label>
</div>

<div class="text_info clearfix"><span>通信地址：</span></div>
<div class="input_info">
<input type="text" class="width350" name="mailaddress"/>
<div class="validate_msg_tiny">50长度以内</div>
</div>

<div class="text_info clearfix"><span>邮编：</span></div>
<div class="input_info">
<input type="text" name="zipcode"/>
<div class="validate_msg_long">6位数字</div>
</div>

<div class="text_info clearfix"><span>QQ：</span></div>
<div class="input_info">
<input type="text" name="qq"/>
<div class="validate_msg_long">5到13位数字</div>
</div>
</div>
<!--操作按钮-->
<div class="button_info clearfix">
<input type="submit" value="保存" class="btn_save" />
<input type="button" value="取消" class="btn_save" onclick="history.back();"/>
</div>
</form>
</div>
<!--主要区域结束-->
<div id="footer">
<span>[源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</span>
<br />
<span>版权所有(C)云科技有限公司 </span>
</div>
</body>
</html>

更新页面

account_update.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" media="all" href="../styles/global.css" />
<link type="text/css" rel="stylesheet" media="all" href="../styles/global_color.css" />
<script language="javascript" type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script language="javascript" type="text/javascript">
//查询推荐人ID
function search_recommender() {
//重置recommender_id
$("#recommender_id").val("");

//如果身份证为空，则返回
var idcardno = $("#recommender_idcardno").val();
if(idcardno == ""){
$("#recommender_msg").text("正确的身份证号码格式").removeClass("error_msg");
return;
}

//如果身份证格式不对，则给出提示
var reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/;
if(!reg.test(idcardno)){
$("#recommender_msg").text("身份证号格式不正确！").addClass("error_msg");
return;
}
//用Ajax传递地址和值

}

//保存成功的提示信息
function showResult() {
showResultDiv(true);
window.setTimeout("showResultDiv(false);", 3000);
}
function showResultDiv(flag) {
var divResult = document.getElementById("save_result_info");
if (flag)
divResult.style.display = "block";
else
divResult.style.display = "none";
}

//显示修改密码的信息项
function showPwd(chkObj) {
if (chkObj.checked)
document.getElementById("divPwds").style.display = "block";
else
document.getElementById("divPwds").style.display = "none";
}
</script>
</head>
<body>
<!--Logo区域开始-->
<div id="header">
<img src="../images/logo.png" alt="logo" class="left"/>
<a href="#">[退出]</a>
</div>
<!--Logo区域结束-->
<!--导航区域开始-->
<div id="navi">

<ul id="menu">
<li><a href="../index.html" class="index_off"></a></li>
<li><a href="../role/role_list.html" class="role_off"></a></li>
<li><a href="../admin/admin_list.html" class="admin_off"></a></li>
<li><a href="../fee/fee_list.html" class="fee_off"></a></li>
<li><a href="../account/account_list.html" class="account_on"></a></li>
<li><a href="../service/service_list.html" class="service_off"></a></li>
<li><a href="../bill/bill_list.html" class="bill_off"></a></li>
<li><a href="../report/report_list.html" class="report_off"></a></li>
<li><a href="../user/user_info.html" class="information_off"></a></li>
<li><a href="../user/user_modi_pwd.html" class="password_off"></a></li>
</ul>

</div>
<!--导航区域结束-->
<!--主要区域开始-->
<div id="main">
<!--保存成功或者失败的提示消息-->
<div id="save_result_info" class="save_fail">保存失败，旧密码错误！</div>
<form action="${pageContext.request.contextPath }/account/update.do" method="post" class="main_form">
<!--必填项-->
<div class="text_info clearfix"><span>账务账号ID：</span></div>
<div class="input_info">
<input type="text" name="id" value="${account.id}" readonly class="readonly" />
</div>
<div class="text_info clearfix"><span>姓名：</span></div>
<div class="input_info">
<input type="text" name="real_name" value="${account.real_name}" />
<span class="required">*</span>
<div class="validate_msg_long error_msg">20长度以内的汉字、字母和数字的组合</div>
</div>
<div class="text_info clearfix"><span>身份证：</span></div>
<div class="input_info">
<input type="text" name="idcard_no" value="${account.idcard_no}" readonly class="readonly" />
</div>
<div class="text_info clearfix"><span>登录账号：</span></div>
<div class="input_info">
<input type="text" name="login_name" value="${account.login_name}" readonly class="readonly"  />

</div>

<div class="text_info clearfix"><span>电话：</span></div>
<div class="input_info">
<input type="text" name="telephone" class="width200" value="${account.telephone }"/>
<span class="required">*</span>
<div class="validate_msg_medium error_msg">正确的电话号码格式：手机或固话</div>
</div>
<div class="text_info clearfix"><span>推荐人身份证号码：</span></div>
<div class="input_info">
<input type="text" id="recommender_idcardno" onblur="search_recommender();" value="${account.recommender_idcardno}"/>
<input type="hidden" name="recommender_id" id="recommender_id" value="${account.recommender_id}"/>
<div class="validate_msg_long error_msgs" id="recommender_msg">正确的身份证号码格式</div>
</div>
<div class="text_info clearfix"><span>生日：</span></div>
<div class="input_info">
<input type="text" name="birthdate" value="${account.birthdate}" readonly class="readonly" />
</div>
<div class="text_info clearfix"><span>Email：</span></div>
<div class="input_info">
<input type="text" name="email" class="width200" value="${account.email }"/>
<div class="validate_msg_medium">50长度以内，合法的 Email 格式</div>
</div>

<div class="text_info clearfix"><span>职业：</span></div>
<div class="input_info">
<select name="occupation">
<option value="">全部</option>
<option  value="1" ${account.occupation == '1' ? 'selected' : ''} >干部</option>
<option value="2" ${account.occupation=='2' ? 'selected' : ''} >学生</option>
<option value="3" ${account.occupation=='3'?'selected':''} >技术人员</option>
<option value="4" ${account.occupation=='4'?'selected':''} >其他</option>
</select>
</div>
<div class="text_info clearfix"><span>性别：</span></div>
<div class="input_info fee_type">
<input type="radio" name="gender" value="1" checked="<c:if test='${account.gender==1}'>checked</c:if>" id="female" onclick="feeTypeChange(1);" />
<label for="female">女</label>
<input type="radio" name="gender" value="0" checked="<c:if test='${account.gender==0}'>checked</c:if>"  id="male" onclick="feeTypeChange(2);" />
<label for="male">男</label>
</div>

<div class="text_info clearfix"><span>通信地址：</span></div>
<div class="input_info">
<input type="text" name="mailaddress" class="width350" value="${account.mailaddress }"/>
<div class="validate_msg_tiny">50长度以内</div>
</div>

<div class="text_info clearfix"><span>邮编：</span></div>
<div class="input_info">
<input type="text" name="zipcode" value="${account.zipcode }"/>
<div class="validate_msg_long">6位数字</div>
</div>

<div class="text_info clearfix"><span>QQ：</span></div>
<div class="input_info">
<input type="text" name="qq" value="${account.qq }"/>
<div class="validate_msg_long">5到13位数字</div>
</div>
<!--操作按钮-->
<div class="button_info clearfix">
<input type="submit" value="保存" class="btn_save" />
<input type="button" value="取消" class="btn_save" onclick="history.back();"/>
</div>
</form>
</div>
<!--主要区域结束-->
<div id="footer">
<span>[源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</span>
<br />
<span>版权所有(C)云科技有限公司 </span>
</div>
</body>
</html>