jsp用户注册页面

最新推荐文章于 2023-09-15 12:59:31 发布
最新推荐文章于 2023-09-15 12:59:31 发布
阅读量1.6k 收藏 8
点赞数 1
分类专栏： java web 文章标签： jsp用户注册
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjz_sdau/article/details/79810438
版权 
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base href="<%=basePath%>">
<title>用户注册</title>
<link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">

<!-- 时间空间样式表 -->
<link rel="stylesheet" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">

<script type="text/javascript" src="jquery/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

<!-- 表单验证 -->
<script src="bootstrapvalidator/js/bootstrapValidator.js"
	type="text/javascript"></script>
	
<!-- 时间空间日期格式js -->
<script src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.js" type="text/javascript"></script>
<script src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>

<!-- 三级联动城市划分js -->
<script type="text/javascript" src="js/city.js"></script>


<script type="text/javascript">
	
	//初始化标签，配置日期格式插件相关参数
	$(function(){
		$(".form_datetime").datetimepicker({
	        format: 'yyyy-mm-dd',
	        minView:'month',
	        language: 'zh-CN',
	        autoclose: true,//选中自动关闭
	        startDate:'1900-01-01',
	        todayBtn: true//显示今日按钮
	 });
		
		
		
	//三级联动
	
	//设置省份初始化
	var html="";
	$.each(city.citylist,function(index,item){
		html+="<option value='"+item.p+"'>"+item.p+"</option>";
	})
	
	$("select[name='province']").html(html);
	
	
	//
	html="";
	$.each(city.citylist,function(index,item){
		if(item.p=="北京"){
			$.each(item.c,function(index,c){
				html+="<option value='"+c.n+"'>"+c.n+"</option>";
			})
		}
	});
	$("select[name='prefecture']").html(html);
	
	
	//省份改变时候，市区做相应的改变
	$("select[name='province']").change(function(){
		var p=$("select[name='province']").val();
		//设置清空乡镇残余文字。
		$("select[name='county']").html("");
		
		html="";
		$.each(city.citylist,function(index,item){
			if(item.p==p){
				$.each(item.c,function(index,c){
					html+="<option value='"+c.n+"'>"+c.n+"</option>";
				})
			}
		});
		
		$("select[name='prefecture']").html(html);
	});
	
	$("select[name='prefecture']").change(function(){
		var p=$("select[name='province']").val();
		var c=$("select[name='prefecture']").val();
		
		html="";
		$.each(city.citylist,function(index,item){
			
			if(p==item.p){
				
				$.each(item.c,function(index,city){
					
					if(c==city.n){
						
						$.each(city.a,function(index,a){
							
							html+="<option value='"+a.s+"'>"+a.s+"</option>";
												
						})
					}
				});
			}
		});
		$("select[name='county']").html(html);
	})
	
	});
	
	
	
	
	
	function validateForm() {
		// 验证表单
		$("#registerform").bootstrapValidator({
		 	message: 'This value is not valid',
            feedbackIcons: {/*输入框不同状态，显示图片的样式*/
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {/*验证*/
                username: {/*键名username和input name值对应*/
                    message: 'The username is not valid',
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '用户名不能为空'
                        },
                        regexp: {
                        	regexp: /^[a-zA-Z0-9_\.]+$/,
                        	message: '用户名不合法, 请重新输入'
                        },
                        stringLength: {/*长度提示*/
                            min: 6,
                            max: 30,
                            message: '用户名长度必须在6到30之间'
                        }/*最后一个没有逗号*/
                        
                    }
                },
                password: {
                    message:'密码无效',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        regexp: {
                        	regexp: /^[a-zA-Z0-9_\.]+$/,
                        	message: '密码不合法, 请重新输入'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: '密码长度必须在6到30之间'
                        }
                    }
                },
                realname: {
                    message:'真实姓名无效',
                    validators: {
                        notEmpty: {
                            message: '真实姓名不能为空'
                        },
                        regexp: {
                        	regexp:   /^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$/,
                        	message: '姓名不合法, 请重新输入'
                        },
                        stringLength: {
                            min: 2,
                            max: 10,
                            message: '姓名长度必须在2到10之间'
                        }
                    }
                },
                sex: {
                    message:'性别无效',
                    validators: {
                        notEmpty: {
                            message: '性别不能为空'
                        },
                    }
                },
                city: {
                    message:'城市无效',
                    validators: {
                        notEmpty: {
                            message: '城市不能为空'
                        },
                        stringLength: {
                            min: 1,
                            max: 30,
                            message: ''
                        }
                    }
                },
                email: {
                    message:'邮箱无效',
                    validators: {
                        notEmpty: {
                            message: '邮箱不能为空'
                        },
                        regexp: {
                        	regexp:  /^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})$/,
                        	message: '邮箱不合法, 请重新输入'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: '密码长度必须在6到30之间'
                        }
                    }
                },
                qq: {
                    message:'QQ无效',
                    validators: {
                        notEmpty: {
                            message: 'QQ不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 10,
                            message: 'QQ长度必须在6到30之间'
                        }
                    }
                }
            }
        })
        
        
       
		return false;
	}
	
	

	function register() {
		// 异步注册用户
		var name = $("#username").val();
		var pwd = $("#password").val();
		var realname = $("#realname").val();
		var sex = $("#sex").val();
		var hobbys =$("#hobbys").val();
		var birthday = $("#birthday").val();
		var email = $("#email").val();
		var qq = $("#qq").val();
		var qq = $("#province").val();
		var qq = $("#prefecture").val();
		var qq = $("#county").val();
		var d={"action":"register","username":name,"password":pwd,"realname":realname,
				"sex":sex,"hobbys":hobbys,"birthday":birthday,"province":province,"prefecture":prefecture,"county":county,
				"email":email,"qq":qq};
		$.ajax({
			type : "post",
			dataType : "json",
			url : "userServlet",
			data : d,
			success : function(data) {
				alert(data.msg);
			}
		});
	}
	</script>
</head>
<body>

	<div class="container">
		<div class="row">
			<div class="col-sm-offset-3 col-sm-6 text-center">
				<h3>用户注册</h3>
			</div>
		</div>
		<form class="form-horizontal col-sm-offset-3" id="registerform"
			method="post" action="userServlet?action=register">
			<div class="form-group">
				<label for="username" class="col-sm-2 control-label">账号：</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" name="username" id="username"
						placeholder="请输入账号">
				</div>
			</div>
			<div class="form-group">
				<label for="password" class="col-sm-2 control-label">密码：</label>
				<div class="col-sm-4">
					<input type="password" class="form-control" name="password" id="password"
						placeholder="请输入密码">
				</div>
			</div>
			<div class="form-group">
				<label for="password2" class="col-sm-2 control-label">确认密码：</label>
				<div class="col-sm-4">
					<input type="password" class="form-control" name="password2" id="password2"
						placeholder="请确认密码">
				</div>
			</div>
			<div class="form-group">
				<label for="realname" class="col-sm-2 control-label">真实姓名：</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" name="realname" id="realname"
						placeholder="请输入真实姓名">
				</div>
			</div>
			<div class="form-group">
				<label for="sex" class="col-sm-2 control-label">性别：</label>
				<div class="col-sm-4">
					<label class="radio-inline"> <input type="radio" name="sex" id="sex"
						value="male" checked> 男
					</label> <label class="radio-inline"> <input type="radio"
						name="sex" value="female"> 女
					</label>
				</div>
			</div>
			<div class="form-group">
				<label for="hobbys" class="col-sm-2 control-label">爱好：</label>
				<div class="col-sm-4">
					<label class="checkbox-inline"> <input type="checkbox"
						name="hobbys" value="吃饭">吃饭
					</label> <label class="checkbox-inline"> <input type="checkbox"
						name="hobbys" value="睡觉">睡觉
					</label> <label class="checkbox-inline"> <input type="checkbox"
						name="hobbys" value="打豆豆">打豆豆
					</label>
				</div>
			</div>

			<div class="form-group">
				<label for="birthday" class="col-sm-2 control-label">生日：</label>
				<div class="col-sm-4">
					<div class="input-group date form_datetime"
						data-date-format="dd-MM-yyyy" data-link-field="dtp_input1">
						<input class="form-control" size="16" type="text" name="birthday" id="birthday" value="2000-01-01" readonly>
							 <span class="input-group-addon">
							 	<span class="glyphicon glyphicon-remove"></span>
							 </span>
							 <span class="input-group-addon">
								 <span class="glyphicon glyphicon-th"></span>
							 </span>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label for="" class="col-sm-2 control-label">城市：</label>
				<div class="col-sm-4">
					<select class="form-control" name="province" id="province"></select>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-4">
					<select class="form-control" name="prefecture" id="prefecture"></select>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-4">
					<select class="form-control" name="county"></select>
				</div>
			</div>
			<div class="form-group">
				<label for="email" class="col-sm-2 control-label">邮箱：</label>
				<div class="col-sm-4">
					<input type="email" class="form-control" name="email" id="email"
						placeholder="请输入邮箱">
				</div>
			</div>
			<div class="form-group">
				<label for="qq" class="col-sm-2 control-label">QQ：</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" name="qq" id="qq"
						placeholder="请输入QQ">
				</div>
			</div>
			<div class="form-group has-error">
				<div class="col-sm-offset-2 col-sm-4 col-xs-6 ">
					<span class="text-warning"></span>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-4 col-xs-12">
					<button class="btn btn-success btn-block" type="submit" οnclick="validateForm();">注册</button>
				</div>
			</div>
		</form>
	</div>


</body>
</html>

给我瓶叶小白
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSP用户注册页面
11-04
SP(JavaServer Pages)是一种动态页面技术。主要构成元素：Java+HTML，我们使用JSP来连接数据验证帐号密码，以下是实例代码：
JSP实现简单的登录和注册
weixin_61370021的博客
03-19 1万+
JSP实现简单的登录和注册，使用Map集合模拟数据库存储数据
用jsp实现简单登入注册界面功能（css美化）（软件idea）
程序猿追的博客
03-24 4万+
思路：创建登入界面（login），再创建登入成功与登入失败界面（loginsuccess与loginfail），再创建注册成功界面（registersuccess）与注册界面（register）以及总控制文件（check）通过form标签的action将他们连接起来。 第一步 首先我们来看看效果 登入界面（login） 登入成功与登入失败（loginsuccess与loginfail） 注册界面（register） 注册成功(registersuccess) 第二步 创建项目，再添加框
Javaweb初学——【JSP+Servlet+JDBC】登录注册简单实现
qq_49355028的博客
01-25 1万+
使用【JSP+Servlet+JDBC】实现一个简单的登录注册，通过表单对数据库进行增删改查。
用JSP做个简单的登录注册页面
热门推荐
l1051663145的博客
10-21 9万+
用JSP做个简单的登录注册页面 第一步先分析整个过程，然后得出大概思路。 首先，进入登录页面（login.jsp），如下： 我们是没有账号的所以需要注册账号，所以这时候必须有一个注册页面（register.jsp）,如下 紧接着注册成功后跳转成功页面，这时我们需要一个注册成功的页面（registersuccess.jsp）,如下： 点击返回页面后，我们就可以在登录页面登录，然后登录时有登录成功和登录失败的页面。所以还要再写两个（loginsuccess.jsp loginfailure.jsp）如下
用JSP简单的写一个登录注册页面
qq_52076808的博客
07-10 1万+
用JSP简单的写一个登录注册页面，并对输出是的乱码进行处理
JSP 用户注册页面
09-13
【JSP用户注册页面】是Web开发中常见的一环，主要功能是收集用户信息并进行存储。在这个场景中，我们通常会使用Java Server Pages（JSP）技术来创建交互式的前端界面，配合后端的Java代码处理数据。下面将详细阐述...
jsp_用户注册界面
09-27
jsp用户注册页面是使用Java Server Pages（JSP）技术实现的用户注册界面，主要功能是让用户输入注册信息，并对输入信息进行校验和处理。 JSP简介 JSP（Java Server Pages）是一种基于Java技术的服务器端脚本语言，...
jsp页面用户注册实现
12-23
一个用于用户注册的jsp页面，能够进行验证从数据库里
jsp注册页面
05-12
jsp注册页面是一种常用的jsp应用场景，用于实现用户注册功能。下面是关于jsp注册页面的详细知识点： jsp注册页面的组成 jsp注册页面通常由以下几个部分组成： * 表单form：用于提交用户注册信息的表单，包括...
jsp页面注册
weixin_70738141的博客
02-19 986
jsp
jsp登录注册代码（增删改查+网页+数据库）
全栈
03-25 3万+
register.jsp:注册 doregister.jsp:注册信息弹框 login.jsp:登录 dologin.jsp：与数据库相连、存放登陆的用户 index.jsp:主界面 update.jsp:修改 doup.jsp:修改页面（帮助） info.jsp：详情 dodel.jsp:删除界面
【JSP】实现注册页面跳转以及注册用户功能实现
懂得一千零一种,赋予你失败的方法！
01-23 1万+
文章目录一、目标二、注册页面的实现Ⅰ.实现注册页面跳转Ⅱ.制作注册页面Ⅲ.完善dbHelper类Ⅳ.创建RegisterServletⅤ.效果展示 一、目标 在之前的一篇文章中我们做了登陆界面，并且实现了登陆时与数据库信息的交互，成功登陆了页面。今天，接下去，实现注册界面的设计以及功能实现。 二、注册页面的实现 Ⅰ.实现注册页面跳转 <%-- Created by IntelliJ IDEA. User: 35192 Date: 2021/1/21 Time: 20:33 T..
JSP实现登录与注册界面
bb_111的博客
10-05 4759
JSP实现登录与注册界面
JAVA EE 之 JSP 创建注册界面
weixin_47725780的博客
10-08 720
JAVA EE 之 JSP 创建注册界面 我们先构思一个大概的框架 示例如下： 由以上知 项目构建如下 我们所需文件类型： 分别为注册界面（regist.xhtml）和展示页面（show.xhtml）以及受管Bean（Bean.java）和一个自定义邮箱转换器（EmailConverter.java）。 【1】 regist.xhtml <?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//D...
jsp页面：用户登录，用户注册，web信息系统页面
最新发布
qq_42779898的博客
09-15 1777
1．创建一个JSP页面文件，实现用户注册页面。 2．创建一个JSP页面文件，实现登录界面：有用户名和密码输入、提交按钮、重置按钮，及转向注册页面的超链接。 3. 创建一个Web信息系统的主页面，使用框架划分窗口实现页面布局。
jsp +mysql 好看的登录与注册页面 动态背景
qq_53551758的博客
04-24 5317
在webcontent文件夹下面建立css文件，login.jsp与loginjudge.jsp，registcheck.jsp直接放到webcontent文件夹下面，normalize.min.css与login.css放到css文件里面。建立数据库Td_Snacks。
java web用jsp编写注册页面提交后显示注册成功页面
m0_62264065的博客
11-25 6415
java web用jsp编写注册页面提交后显示注册成功页面，点击刷新显示页面访问次数
jsp实现注册页面，以及如何实现验证码，同时包含jsp异步请求实现用户名查询，防止出现用户名重复。
zzjlmn的博客
12-29 976
javaWeb注册页面前后端实现，以及验证码实现
jsp用户登陆注册页面
06-07
您好，如果您需要实现JSP用户登录注册页面，可以按照以下步骤进行： 1. 创建JSP页面 首先，在您的项目目录下创建login.jsp和register.jsp两个JSP页面。这两个页面分别用于用户登录和注册。 2. 创建Servlet 然后，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值