分享学做的一个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>男
<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 ...
随机推荐
- HY 的惩罚 (Trie 树，博弈论)
[问题描述] hy 抄题解又被老师抓住了,现在老师把他叫到了办公室. 老师要 hy 和他玩一个游 戏.如果 hy 输了,老师就要把他开除信息组; 游戏分为 k 轮.在游戏开始之前,老师会将 n 个由英 ...
- 动态规划 List
例题 #A 传纸条(Accepted) #B 乘积最大 (Unaccepted) #C 石子合并 (Accepted) #D 加分二叉树 (Unaccepted) #E 没有上 ...
- 【Java架构：进阶技术】——一篇文章搞掂：JVM调优
Sun官方定义的Java技术体系: Java程序设计语言 各种硬件平台上的Java虚拟机 Class文件格式 Java API类库 来自商业机构和开源社区的第三方Java类库 JDK(Java Dev ...
- 生产环境下，oracle不同用户间的数据迁移。第二部分
任务名称:生产环境下schema ELON数据迁移至schema TIAN######################################## 测试二:测试参数remap_tablespa ...
- Mac下隐藏或显示文件/文件夹
命令行操作 显示:defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏:defaults write com.apple.fi ...
- 前端工具-ES6相关工具
处理 ES6 语法 使用 Babel Babel 是一个用于将 ECMAScript 2015+ 代码转换为新旧浏览器或其他环境支持的 JavaScript 向下兼容版本代码的工具链. Babel 主 ...
- Nginx 配置 location 以及 return、rewrite 和 try_files 指令
正则表达式 Nginx 内置的全局变量 location 前缀字符串及优先级 示例 location 匹配原则 if 和 break 指令 if break return.rewrite 和 try_ ...
- 剑指offer第二版面试题5：从尾到头打印链表（JAVA版）
题目描述: 输入一个链表,从尾到头打印链表每个节点的值.返回新链表. import java.util.Stack; //定义链表结构 class ListNode { int value; List ...
- 解决BootstrapTable设置height属性后，表格不对齐的问题
解决BootstrapTable设置height属性后,表格不对齐的问题 2018年03月06日 09:56:54 nb7474 阅读数 5920 一般在使用BootstrapTable 插件 ...
- 无法启动Sql Server服务
本文首发地址为hilsion的博客 今天遇到一个无法启动SQL Server服务的问题,具体报错如下: 根据错误提示,去到WINDOWS的事件查看器.在WIN10上,右击右下角的菜单图标: 然后依次点 ...