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

深藏阁楼爱情的钟 2022-06-05 23:51 343阅读 0赞

框架:spring+springMVC+myBatis  
jar包  
![jar包][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">
              
         
         <util:properties id="jdbc" location="classpath:jdbc.properties"/>
         
         <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>
         
         <bean id="SqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
                  
              <property name="dataSource" ref="dataSource"/>
                  
              <property name="mapperLocations" value="classpath:com/lanou3g/entity/*.xml"/>
         </bean>
    
         
         
         <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
                  
              <property name="basePackage" value="com.lanou3g.dao"/>
                  
              <property name="annotationClass" value="com.lanou3g.annotation.MyBatisDao"/>
         </bean>
         
         <context:component-scan base-package="com.lanou3g"/>
    
         
    
         
         <mvc:annotation-driven />
    
         
         
         <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">
         
         <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>
    
    
    
         
         <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>  <div id="header"> <img src="../images/logo.png" alt="logo" class="left"/> <a href="#">[退出]</a> </div>   <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">  <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>
            
            <div id="header">
                <img src="../images/logo.png" alt="logo" class="left"/>
                <a href="#">[退出]</a>
            </div>
            
            
            <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>
            
            <div id="header">
                <img src="../images/logo.png" alt="logo" class="left"/>
                <a href="#">[退出]</a>
            </div>
            
            
            <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>

[jar]: /images/20220606/cb65d2f174114c23b4b0e5f21155eb4d.png