zoukankan      html  css  js  c++  java
  • 简单注册界面的应用

    先用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界面:

    添加后的数据库界面:

  • 相关阅读:
    大前端的自动化工厂(1)——Yeoman
    推荐两个漂亮的编程字体
    javascript基础修炼(3)—What's this(下)
    javascript基础修炼(2)——What's this(上)
    javascript基础修炼(1)——一道十面埋伏的原型链面试题
    2018年8月中级前端开发推荐书籍
    React组件方法中为什么要绑定this
    Angularjs进阶笔记(2)-自定义指令中的数据绑定
    Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定
    mysql多表查询
  • 原文地址:https://www.cnblogs.com/weixiao1717/p/11717126.html
Copyright © 2011-2022 走看看