简单注册界面的应用

先用jsp建立一个登陆界面:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<style>
    .a{
        margin-top: 20px;
    }
    .b{
        font-size: 20px;
        width: 160px;
        color: white;
        background-color: greenyellow;
    }
    
</style>
</head>
<body>
    <%
         Object message = request.getAttribute("message");
         if(message!=null && !"".equals(message)){
     
    %>
         <script type="text/javascript">
              alert("<%=request.getAttribute("message")%>");
         </script>
    <%} %>
    <div align="center">
        <form action="LogonServlet?method=logon" method="post" >
            <div class="a">
                登陆账号:<input type="text" id="account" name="account" value="" onblur="check('account')"/>
            </div>
            <div class="a">
                登陆密码:<input type="password" id="passwords" name="password" />
            </div>
            <div class="a">
                性别:
                <select id="sex" name="sex" >
                     <option  value="男"></option>
                     <option  value="女"></option>
                </select>
            </div>
            <div class="a">
                 姓  名:<input type="text" id="name" name="name" />
            </div>
            <div class="a">
                 学号:<input type="text" id="stunumber" name="stunumber"  onblur="checknumber('stunumber')"/>
            </div>
            <div class="a">
                   电子邮箱:<input type="text" id="mail" name="mail" onblur="judgeMail()"/>
            </div>
            <div class="a">
                   所在学院:<input type="text" id="college" name="college"/>
            </div>
            <div class="a">
                   所在系:<input type="text" id="department" name="department"/>
            </div>
            <div class="a">
                   所在班级:<input type="text" id="classes" name="classes"/>
            </div>
            <div class="a">
                       入学年份(届): 
                       <select id="year" name="year">
                          <option value="2015"> 2015 </option>
                          <option value="2016"> 2016 </option>
                          <option value="2017"> 2017 </option>
                          <option value="2018"> 2018 </option>
                          <option value="2019"> 2019 </option>
                      </select></div>
            <div class="a">
                    生源地:<input type="text" id="diqu" name="diqu" />
            </div>
            <div class="a">
                    备注:<textarea id="beizhu" name="beizhu"></textarea>
            </div>
            
            <div class="a">
                <button type="submit">注册</button>
            </div>
                        
        </form>
    </div>
    <script src="js/Judge.js"></script>
</body>
</html>

然后分别将数据封装:

package bean;

public class Logon {
private int id;
private String account;
private String passwords;
private String sex;
private String name;
private String stunumber;
private String mail;
private String college;
private String department;
private String classes;
private String year;
private String diqu;
private String beizhu;

public Logon(String account,String passwords, String sex,String name,String stunumber,String mail,String college,String department,String classes,String year,String diqu, String beizhu) {
super();
this.account = account;
this.passwords = passwords;
this.sex = sex;
this.name = name;
this.stunumber = stunumber;
this.mail = mail;
this.college=college;
this.department=department;
this.classes=classes;
this.year = year;
this.diqu = diqu;
this.beizhu=beizhu;
}

public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}

public void setBeizhu(String beizhu) {
this.beizhu = beizhu;
}
public String getBeizhu() {
return beizhu;
}
public void setClasses(String classes) {
this.classes = classes;
}
public String getClasses() {
return classes;
}
public void setDepartment(String department) {
this.department = department;
}
public String getDepartment() {
return department;
}

public void setCollege(String college) {
this.college = college;
}
public String getCollege() {
return college;
}
public void setStunumber(String stunumber) {
this.stunumber = stunumber;
}
public String getStunumber() {
return stunumber;
}
public String getAccount() {
return account;
}
public void setaccount(String account) {
this.account = account;
}
public String getPasswords() {
return passwords;
}
public void setPasswords(String passwords) {
this.passwords = passwords;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getYear() {
return year;
}
public void setyear(String year) {
this.year = year;
}
public String getDiqu() {
return diqu;
}
public void setdiqu(String diqu) {
this.diqu = diqu;
}
public String getMail() {
return mail;
}
public void setMail(String mail) {
this.mail = mail;
}

}

然后写服务层接收数据的代码:

package servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import bean.Logon;
import dao.LogonDao;

@WebServlet("/LogonServlet")

    public class LogonServlet extends HttpServlet{
        private static final long serialVersionUID = 1L;
        
        protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            req.setCharacterEncoding("utf-8");
            String method = req.getParameter("method");
            if("logon".equals(method)) {
                logon(req,resp);
            }
        }
        
        LogonDao logonDao = new LogonDao();
        /**
         * 注册
         * @param req
         * @param resp
         * @throws IOException
         * @throws ServletException
         */
        private void logon(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException {
            req.setCharacterEncoding("utf-8");
            //1-5
            String account = req.getParameter("account");
            String passwords = req.getParameter("passwords");
            String name = req.getParameter("name");
            String sex = req.getParameter("sex");
            String year = req.getParameter("year");
            //6-10
            String diqu =req.getParameter("diqu");
            String mail = req.getParameter("mail");
            String stunumber = req.getParameter("stunumber");
            String college = req.getParameter("college");
            String department = req.getParameter("department");
            String classes = req.getParameter("classes");
            String beizhu = req.getParameter("beizhu");
            Logon logon = new Logon(account, passwords,sex, name,stunumber, mail,college,department,classes, year,diqu,beizhu);
            logonDao.add(logon);
            req.setAttribute("message", "添加成功");
            req.getRequestDispatcher("Logon.jsp").forward(req,resp);
            
        }
    }
    
    
    

之后连接数据库添加数据:

package dao;

import java.sql.Connection;
import java.sql.Statement;

import bean.Logon;
import util.DBUtil;

public class LogonDao {
    /**
     * 注册
     * @param tb1
     * @return
     */
    public boolean add(Logon logon) {
        String sql = "insert into logon(account,passwords,sex,name,stunumber,mail,college,department,classes,year,diqu,beizhu)values('" + logon.getAccount() + 
                "','" + logon.getPasswords() + "','"+ logon.getSex() + "','"+ logon.getName() + "','" + logon.getStunumber() + "','"+ logon.getMail() + "','"+ logon.getCollege() + "','" + logon.getDepartment() +
                "','" + logon.getClasses() + "','" + logon.getYear() + "','"+logon.getDiqu()+"','" +  logon.getBeizhu() + "')";
        Connection conn = DBUtil.getConn();
        Statement state = null;
        boolean f = false;
        try {
            state = conn.createStatement();
            state.executeUpdate(sql);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            DBUtil.close(state, conn);
        }
        return f;
    }
}

最后通过javascript判断邮箱,学号的正确与否

/**
 * 
 */
/**
 * 
 * 公共方法
 */
function getElement(id) {
    return document.getElementById(id);
}


function check(id)
{
    var box = document.getElementById(id);
    var val = box.value;
    if(!/^[A-Za-z]+.*\d+.*$/.test(val)){
    alert("错误的值,必须以字母开头,后边至少有一个数字!");
    }
}

function code(id) {
    var value = getElementById(id).value;
    if (value == null || value == "") {
        alert('不能为空');
    }
}

function checknumber(id){
    var str = '2018';
    var value1 = document.getElementById(id);
    var value2=value1.value;
    var a=str.lastIndexOf('value2');  //如果能匹配到 --> 返回一个指定的字符串值最后出现的位置,如果不能匹配到 --> 返回-1
    if(a==-1){
        alert('学号格式错误');
    }
    else{
        return value2;
    }
        
}

function judgediqu() {
    /* 网址正则:/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|www\.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/; */
    /* 手机正则:/^[1](([3][0-9])|([4][5,7,9])|([5][0-9])|([6][6])|([7][3,5,6,7,8])|([8][0-9])|([9][8,9]))[0-9]{8}$/ */
    /* 邮箱正则: /^([a-z]|[0-9]|[A-Z])+@(((163)|(qq)|(126)|(sina)|(souhu)|(sougou)|(139)|(hotmail)|(Gmail))\.com)$|(yeah\.net)$|(189\.cn)$/*/
    var diqu = document.getElement('diqu').value;
    
        var strRegex = /^[1](([3][0-9])|([4][5,7,9])|([5][0-9])|([6][6])|([7][3,5,6,7,8])|([8][0-9])|([9][8,9]))[0-9]{8}$/;
        var re = new RegExp(strRegex);
        if (!re.test(diqu)) {
            alert('手机格式错误!');
        } else {
            return diqu;
        }
}
function judgeMail() {
    var mail = document.getElementById('mail').value;
        var strRegex =  /^([a-z]|[0-9]|[A-Z])+@(((163)|(qq)|(126)|(sina)|(souhu)|(sougou)|(139)|(hotmail)|(Gmail))\.com)$|(yeah\.net)$|(189\.cn)$/;
        var re = new RegExp(strRegex);
        if (!re.test(mail)) {
            alert('邮箱格式错误!');
        } else {
            return mail;
        }
}

web界面:

添加后的数据库界面:

 

posted @ 2019-10-21 23:29  一粒盐  阅读(280)  评论(0编辑  收藏  举报