基于jsp的注册页面（无css样式）

aaaaaa张同学

于 2023-09-26 10:42:20 发布

阅读量196

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_60990361/article/details/133299502

版权

本项目主要为使用jsp设计的注册页面，其中包括省市联动，密码的两次输入是否相同的判断，但并没有对输入格式的限制（如有需要可自行添加正则表达式），并附带后端代码，具体接口实现以及数据库设计可私聊。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<form action="zhu" method="get">
    <div>注册信息</div>
    <div>注：标有*处，均为必填</div>
    <div><span>*</span>登录名：<input type="text" name="dname">由字母、数字或"_"组成，长度不小于6位，不多于30位</div>
    <div><span>*</span>密码：<input type="password" name="pass" id="pass">不少于6位字符</div>
    <div><span>*</span>确认密码：<input type="password" name="qpass" id="qpass" onchange="checkRepwd()">请再次输入密码
        <div id="repwdId" class="red" style="color: red;"></div></div>
    </div>
    <div>详细信息</div>
    <div><span>*</span>真实姓名：<input type="text" name="sname"></div>
    <div><span>*</span>性别：<input type="radio" value="男" name="ssex">男<input type="radio" value="女" name="ssex">女</div>
    <div>
        <span>*</span>省份：
        <select id="province" onchange="choose(this.value)" name="sheng">
            <option value="0">--请选择省份--</option>
            <option value="山东">山东</option>
            <option value="山西">山西</option>
            <option value="河南">河南</option>
            <option value="河北">河北</option>
            <option value="北京">北京</option>
        </select>
        城市：
        <select id="city" disabled="disabled" name="shi">
            <option value="0">--请选择城市--</option>
        </select>
    </div>
    <div>
        <span>*</span>证件类型：
        <select name="sno_type">
            <option value="二代身份证">二代身份证</option>
            <option value="港澳台居民居住证">港澳台居民居住证</option>
            <option value="港澳居民来往内地通行证">港澳居民来往内地通行证</option>
            <option value="护照">护照</option>
        </select>
    </div>
    <div><span>*</span>证件号码：<input type="text" name="sno"></div>
    <div><span>*</span>出生日期：<input type="text" name="sbrith"></div>
    <div>
        旅客类型：
        <select name="stype">
            <option value="成人">成人</option>
            <option value="儿童">儿童</option>
            <option value="残疾人">残疾人</option>
            <option value="军人">军人</option>
        </select>
    </div>
    <div>备注：<textarea name="snotes"></textarea></div>
    <input type="checkbox" name="同意" id="tongyi">我已阅读并同意遵守<a href="https://kyfw.12306.cn/otn/regist/rule" >《中国铁路客户服务中心网站服务条款》</a>
    <div><input type="submit"><input type="reset"></div>


</form>
<script>
    // 创建一个二维数组
    var arr = new Array(4)
    arr[0] = ["山东","济南","青岛","淄博","枣庄","东营","烟台"]
    arr[1] = ["山西","太原","大同","阳泉","长治","晋城","朔州"]
    arr[2] = ["河南","郑州","开封","洛阳","安阳","鹤壁","新乡"]
    arr[3] = ["河北","石家庄","唐山","秦皇岛","邯郸","邢台","保定"]

    function choose(val){
        // 获取city的select
        var city = document.getElementById("city")
        // 获取option
        var cityOp = city.getElementsByTagName("option")
        // 设置可操作
        city.disabled = false
        // 先删除，后添加
        while (cityOp.length > 0){
            // 删除第一个option
            city.removeChild(cityOp[0])
        }
        var isProvince = false
        // 遍历
        for (var i = 0; i < arr.length; i++) {
            //取一维数组
            var arr1 = arr[i]
            //取一维数组的第一个值
            var firstVal = arr1[0]
            //判断
            if (firstVal != val) continue
            isProvince = true
            //遍历
            for (var j = 1; j < arr1.length; j++) {
                // 获取城市名
                let value = arr1[j]
                // 创建option
                let option = document.createElement("option")
                // 创建文本
                let text = document.createTextNode(value)
                // 把文本添加到标签
                option.appendChild(text)
                //添加到city里面
                city.appendChild(option)
            }
        }
        if (!isProvince){
            city.disabled = true
            let option = document.createElement("option")
            let text = document.createTextNode("--请选择市--")
            option.appendChild(text)
            city.appendChild(option)
        }
    }
    function checkRepwd(){
        var repwd=document.getElementById("pass").value;
        var pwd=document.getElementById("qpass").value;
        if (pwd!=repwd){
            document.getElementById("repwdId").innerHTML="两次输入的密码不一致";
            return false;
        }
        document.getElementById("repwdId").innerHTML=null;
        return true;
    }
</script>
</body>
</html>

后端代码如下

package servlet;

import entity.MyUser;
import service.MyUserService;
import service.MyUserServiceImpl;

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 java.io.IOException;

//@WebServlet(
//        urlPatterns = {"/zhu"},
//        loadOnStartup = 0
//)
@WebServlet("/zhu")
public class zhuce extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        resp.setContentType("text/html;charset=utf-8");
        String sno=req.getParameter("sno");
        String dname=req.getParameter("dname");
        String pass=req.getParameter("pass");
        String sname=req.getParameter("sname");
        String ssex=req.getParameter("ssex");
        String shome=req.getParameter("sheng")+req.getParameter("shi");
        String sbrith=req.getParameter("sbrith");
        String sno_type=req.getParameter("sno_type");
        String stype=req.getParameter("stype");
        String snotes=req.getParameter("snotes");
        System.out.println(dname+" "+pass);
        MyUserService us=new MyUserServiceImpl();
//        MyUser u= us.queryByNamePwd(dname,pass);
        MyUser u=new MyUser();
        u.setDname(dname);
        u.setPass(pass);
        u.setSno(sno);
        u.setSbrith(sbrith);
        u.setSsex(ssex);
        u.setSno_type(sno_type);
        u.setStype(stype);
        u.setSnotes(snotes);
        u.setSname(sname);
        u.setShome(shome);
//        if (us.add(u)) {
//            resp.getWriter().write("注册成功");
//        }
//        else{
//            resp.getWriter().write("注册失败");
//        }
        us.add(u);
        req.getRequestDispatcher("/index.jsp").forward(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }

}