分享学做的一个jsp注册页面

分享一个自己学习时，用bootstrap，多方搜索做的注册页面，包括页面的非空验证。导入相关的bootstrap的js和css文件就可以了。背景很丑，可以自己换一个。后面进一步完善<(￣︶￣)↗[GO!]

<%@ page language="java" contentType="text/html; charset=UTF-8"

	pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>bootstrap注册页面</title>

		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

		<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" />

		<script src="js/jquery-1.12.0.min.js" type="text/javascript" charset="utf-8"></script>

		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

		<script src="js/jquery.validate.min.js" type="text/javascript"></script>

<script>

	//自定义校验规则

	$.validator.addMethod(

	// 规则的名称

	"checkUsername",

	// 校验的函数

	function(value, element, params) {

		// 参数value代表输入的内容，element代表被校验的元素对象，params代表规则对应的参数值

		// 目的：对输入的username进行ajax异步校验

		// 定义一个标志

		var flag = true;

		$.ajax({

			"async" : false,// 是否异步

			"url" : "${pageContext.request.contextPath}/checkUsername",// 提交地址

			"data" : {

				"username" : value

			},// 传输的数据

			"type" : "POST",// 提交方式

			"dataType" : "json",// 返回的数据类型

			"success" : function(data) {// 成功后的回调函数

				flag = data.isExist;

				alert(flag);

			}

		});

		// 返回false代表该校验器不通过

		return !flag;

	});

	$(function() {

		$("#registForm").validate({

			rules : {

				"username" : {

					"required" : true,

					"checkUsername" : true

				},

				"password" : {

					"required" : true,

					"rangelength" : [ 6, 12 ]

				},

				"repassword" : {

					"required" : true,

					"rangelength" : [ 6, 12 ],

					"equalTo" : "#password"

				},

				"email" : {

					"required" : true,

					"email" : true,

				},

				"sex" : {

					"required" : true

				}

			},

			messages : {

				"username" : {

					"required" : "用户名不能为空",

					"checkUsername" : "该用户名已存在"

				},

				"password" : {

					"required" : "密码不能为空",

					"rangelength" : "密码长度为6-12位"

				},

				"repassword" : {

					"required" : "确认密码不能为空",

					"rangelength" : "密码长度为6-12位",

					"equalTo" : "两次输入的密码不一致"

				},

				"email" : {

					"required" : "邮箱不能为空",

					"email" : "邮箱格式不正确",

				}

			}

		});

	});

</script>

<style type="text/css">

			body{

				/*background-image: url(img/bg8.jpg);*/

				/*background-repeat: no-repeat;*/

				/*background-color: #191970;*/

				background: radial-gradient(ellipse closest-side,

      #00CC66, #006666 20%, #0066CC 50%, #0033CC);

			}

			label{

				text-align: justify;

				text-align-last: justify;

				line-height: 35px;

			}

			.error {

				color: red;

			}

		</style>

	</head>

	<body>

		<div class="container">

			<div class="col-md-4"></div>

			<div class="col-md-6 row" style="margin-top: 50px;background-color: whitesmoke;border-radius: 5px;">

				<div style="margin-top: 30px;margin-bottom: 30px;margin-right: 20px;">

					<form id="registForm" action="${pageContext.request.contextPath}/register" method="post">

	 					<div class="form-group row">

	    					<label for="username" class="col-sm-2 col-form-label">用户名</label>

	    					<div class="col-sm-10"><input type="text" class="form-control" id="username" name="username" placeholder="请输入账号">	</div>

	  					</div>

	  					<div class="form-group row">

	    					<label for="password" class="col-sm-2 col-form-label">密码</label>

	    					<div class="col-sm-10"><input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"></div>

	  					</div>

	  					<div class="form-group row">

	    					<label for="password" class="col-sm-2 col-form-label">确认密码</label>

	    					<div class="col-sm-10"><input type="password" class="form-control" id="repassword" name="repassword" placeholder="请确认密码"></div>

	  					</div>

	  					<div class="form-group row">

	    					<label for="password" class="col-sm-2 col-form-label">邮箱</label>

	    					<div class="col-sm-10"><input type="email" class="form-control" name="email" placeholder="请输入邮箱"></div>

	  					</div>

	  					<div class="form-group row">

	    					<label for="password" class="col-sm-2 col-form-label">姓名</label>

	    					<div class="col-sm-10"><input type="text" class="form-control" name="user" placeholder="请输入姓名"></div>

	  					</div>

	    				<div class="form-group row">

	      					<label for="sex" class="col-sm-2 col-form-label">性别</label>

	      					<div class="col-sm-10">

	        					<div class="form-check form-check-inline" style="line-height: 35px;">

	          						<input class="form-check-input" type="radio" name="sex" id="sex1" value="male" checked>男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

	         						<input class="form-check-input" type="radio" name="sex" id="sex2" value="female">女

	         						<label class="error" for="sex" style="display: none;">性别必须勾选</label>

	        					</div>

	      					</div>

	    				</div>

	  					<div class="form-group row">

	    					<label for="password" class="col-sm-2 col-form-label">验证码</label>

	    					<div class="col-sm-8"><input type="text" class="form-control" id="repassword" placeholder="请输入验证码"></div>

	    					<div class="col-sm-2"><img src="img/bg3.jpg" height="30px"/></div>

	  					</div>

	    				<div class="form-group row">

	    					<div class="col-sm-2"></div>

	    					<!--给按钮加上btn-lg的class就是大号的按钮-->

	    					<div class="col-sm-10"><input type="submit" value="我要注册" class="btn btn-primary btn-block" /></div>

	    				</div>

	    				<div class="form-group row">

	    					<div class="col-sm-2"></div>

	    					<div class="col-sm-5" style="float: left;">已经有账号了?</div>

	    					<div class="col-sm-5"><a href="login.html" style="float: right;">直接登录</a></div>

	    				</div>

					</form>

				</div>

			</div>

			<div class="col-md-2"></div>

		</div>

	</body>

</html>

效果如下：

分享学做的一个jsp注册页面的更多相关文章

一个JSP结果页面tomcat内存溢出
如今,试验组的同事寻找新能源我看到一个奇怪的现象.一个tomcat应用,内只有一个简单的jsp页面,和这个jsp无论是什么页java代码(我想用这个jsp在她的网页测试server一对tomcat的最 ...
分享自己做的一个指定进程以及线程长时间cpu监控的工具
前言: 前面给大家分享过一个工作中用到的编译拷贝脚本,其实工作中还有一些其他工具的使用,今天再来分享一个自己纯手工的CPU监控的脚本.大家可以结合上篇文章与本篇文章一起学习shell. 主要实现功能: ...
jsp注册页面的省份联动（网上copy别人的，然后自己弄了一下才知道怎么用）
首先写一个js里面是所有的省份一些七七八八的东西,直接复制黏贴过去就好了. var addressInit = function(_cmbProvince, _cmbCity, _cmbArea, d ...
做的一个HTML表白页面
页面地址: http://myspace123.qiniudn.com/love/index.html 目录文件结构: index.html <html xmlns="http://w ...
jsp注册页面验证，easyui的jsp+js表单验证
1.1下面的代码是写在Js里面的,就直接写进去不用什么其他东西,这样一个表单验证就好了(1.2图) $.extend($.fn.validatebox.defaults.rules, { phone: ...
今天用css做了一个QQ登录页面
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
Jsp注册页面身份证验证
<script type="text/javascript">function isCardNo(Idcardnumber) { ...
我的第一个jsp程序-实现注册登录留言功能
1,注册功能,包括两个页面 zhuce.jsp注册页面 <%@ page language="java" contentType="text/html; chars ...
用js给闺女做了一个加减乘除的html
下班回家用二十分钟给闺女做了一个加减乘除的页面,顺便记录下代码,时间仓促,后期再来修改吧目录结构 -yq --menu.html --yq.html --yq50.html --yq70.html ...

随机推荐

Cluster基础(二)：ipvsadm命令用法、部署LVS-NAT集群、部署LVS-DR集群
一.ipvsadm命令用法目标: 准备一台Linux服务器,安装ipvsadm软件包,练习使用ipvsadm命令,实现如下功能: 使用命令添加基于TCP一些的集群服务在集群中添加若干台后端真实服务 ...
sqlserver常用命令-4
原文: https://www.cnblogs.com/yunspider/p/7719714.html 常用命令 #查看数据库所有表的行数 SELECT A.NAME ,B.ROWS FROM sy ...
php面试专题---Mysql索引类型、介绍及优点
php面试专题---Mysql索引类型.介绍及优点一.总结一句话总结: 精品视频讲解里面的资料来源也是通过各种资料,比如博客.书等,只不过是基于讲解者的知识体系有整理的过程 1.B-Tree索引三 ...
牛客提高D1t2 最小生成链
分析我们发现可以把题目转化为:有一个序列a,问它的排列中相邻两个值异或的最大值的最小值我们发现序列的构成一定是前几位全是一样的从某一位开始左面全是0右面全是1 所以只要找到一种方案是的交界两个值 ...
ruby file
E:/AutoTHCN/lib/report/generate_report/web14/20190516/LoanTool.636936123857869205_190516_140514.xlsx ...
PHP-执行外部程序
备份 / 恢复数据库 exec - 执行一个外部程序(在 php 文件所在目录进行执行) 很久以前写的,很多方法是项目中的直接复制粘体用不了,只能提供下思路. 用到执行外部程序的就这一句: exec( ...
ELK 日志系统入门及通过 Docker 部署
1. ELK 系统是什么 ELK 是一套日志中心解决方案,其三个字母分别表示: Elasticsearch:负责日志存储及检索 Logstash:负责日志收集.过滤及格式化 Kibana:数据看板,负 ...
SqlServer 2012 AlwaysOn
第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www.cnblogs.com/lyhabc/p/4682028.html第三篇htt ...
Python笔记(十二)_文件
文件的打开模式 'r':以只读的方式打开文件(默认) 'w':以写入的方式打开文件,会覆盖已存在的文件 'x':用写入的方式打开文件,如果文件已存在,会抛出异常 'a':用写入的方式打开文件,如果文件 ...
CET-6 分频周计划生词筛选（Week 3）
点我阅读 Week 3 2016.09.11 p113 manipulate + propel p114 expedition + deficit p115 all p116 envisage p11 ...

分享学做的一个jsp注册页面

分享学做的一个jsp注册页面的更多相关文章

随机推荐

热门专题