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

最新推荐文章于 2024-05-06 11:21:34 发布
最新推荐文章于 2024-05-06 11:21:34 发布
阅读量86 收藏
点赞数
文章标签： json java javascript ViewUI
原文链接：http://www.cnblogs.com/zxfei/p/11055776.html
版权

分享一个自己学习时，用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>

效果如下：
4492

转载于:https://www.cnblogs.com/zxfei/p/11055776.html

weixin_30918415
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSP图书馆管理系统源码 JSPTUSHUGUANLIXITONG.rar
09-26
JSP图书馆管理系统源码 源码描述： 一、源码介绍 JSP图书馆管理系统源码使用servlet，mysql实现，导入sql后，修改DBUtil.java. 部署后访问http://localhost:8080/books/ 二、主要功能 读者可以注册登录，登录时...
用JSP做个简单的登录注册页面
热门推荐
l1051663145的博客
10-21 8万+
用JSP做个简单的登录注册页面 第一步先分析整个过程，然后得出大概思路。 首先，进入登录页面（login.jsp），如下： 我们是没有账号的所以需要注册账号，所以这时候必须有一个注册页面（register.jsp）,如下 紧接着注册成功后跳转成功页面，这时我们需要一个注册成功的页面（registersuccess.jsp）,如下： 点击返回页面后，我们就可以在登录页面登录，然后登录时有登录成功和登录失败的页面。所以还要再写两个（loginsuccess.jsp loginfailure.jsp）如下
jsp设计注册页面
weixin_43887915的博客
06-18 1万+
这是页面访问图： 源代码 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <html> <head> <style > <!-- 元素的设计： --> td.right{ <!-- 名字 --&gt...
JavaWeb学习记录-Jsp登录注册功能完整示例
半度微凉
10-29 1242
HelloJsp Jsp入门学习工程，实现jsp注册登录功能 代码仓库:https://github.com/taoweidong/HelloJsp 环境搭建 java: jdk1.8 tomcat：apache-tomcat-7.0.42 Eclipse:Version: Kepler Service Release 2 相关技术 数据库操作：commons-dbutils-1.7.j...
javaweb 实现注册界面并实时验证
城南的花
10-10 2630
上次写的重装系统搞丢了 这次还是备份一下吧 &lt;%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3
jsp注册里密码强弱怎么弄_js密码强度校验
weixin_42506752的博客
12-31 356
现在很多论坛和博客都在用户注册时添加了验证密码强度的功能，在以前的文章中，我们曾经给出过一段检验密码强度的例子，今天再看一个与《js密码强度校验》的代码。效果：//CharMode函数//测试某个字符是属于哪一类.function CharMode(iN){if (iN>=48 && iN <=57) //数字return 1;if (iN>=65 &&a...
用jsp实现简单登入注册界面功能（css美化）（软件idea）
程序猿追的博客
03-24 4万+
思路：创建登入界面（login），再创建登入成功与登入失败界面（loginsuccess与loginfail），再创建注册成功界面（registersuccess）与注册界面（register）以及总控制文件（check）通过form标签的action将他们连接起来。 第一步 首先我们来看看效果 登入界面（login） 登入成功与登入失败（loginsuccess与loginfail） 注册界面（register） 注册成功(registersuccess) 第二步 创建项目，再添加框
JSP在线客服聊天系统源码 JSPZXKFLTXT.rar
09-26
JSP在线客服聊天系统源码 源码描述： ... 对注册用户或客服多次重复登录做优化处理，只保存第一次登录时的信息 3. 访客登录时，客服在线状态提示 三、注意事项 开发环境为jdk1.7，idea,数据库为 mysql
基于Java的地方美食分享系统设计源码
04-05
这些文件详细展示了如何使用Java、CSS、JavaScript和HTML构建一个地方美食分享系统，该系统拥有管理员和用户两种角色，分别具备用户管理、美食管理、热门菜品管理、菜品资讯管理等功能，以及登录注册、查看美食、...
java_jsp项目源码_博客系统(struts+hibernate+spring).rar
03-28
本项目是一个基于Struts、Hibernate和Spring框架的Java JSP博客系统，旨在提供一个功能完善、易于扩展和定制的网络日志发布平台。项目实现了用户注册、登录、文章发布、评论、分类管理、标签管理、搜索、分页浏览等...
JAVA毕业设计之ssmJsp原创歌曲分享平台项目（ssm完整源码+说明）.zip
02-27
该JAVA毕业设计项目是基于SSM框架开发的原创歌曲分享平台，旨在为用户提供一个分享自己原创音乐作品、发现新音乐、交流创作经验的平台。该项目包含完整的源代码和详细的说明文档，供用户学习和参考。该原创歌曲分享...
JSP作业2 - 利用html实现简单的用户登录注册界面
hades's stack
06-10 2万+
实验要求：自己拟定一个Web应用系统，设计其启动页面和用户登录注册页面。具体要求：设计系统启动页面，使用CSS完成页面中的格式化设计简单格式化即可。用户登录页面页面中至少包括用户登录表单，有用户注册的链接方式。登录表单的提交可以暂时空缺用户注册页面页面中至少包括用户注册表单，有用户登录的链接方式。注册表单的提交可以暂时空缺 代码index.html<!DOCTYPE html> <html l
登录注册页面的验证
weixin_45376650的博客
09-03 2078
登录注册验证是我们平时生活中碰到的最常见的验证，可以说是处处可见。 总结常见的验证流程： 用户选中某一个输入框，显示输入框的提示信息。 输入该输入框的信息。 用户输入完一段信息后，选中下一个输入框，这时上一个输入框失去焦点，开始对用户输入的信息进行判定。 判定分为很多，当然也有一边输入一边判定的。判定完毕后显示提示信息。 重复以上4个步骤，直到需要用户输入的数据全部都符合要求。 提交表单 这里...
一个简单的Jsp注册界面
当你的才华还撑不起你的野心时，那你就应该静下心来学习。
08-23 8216
用Jsp做的一个简单的登陆界面，登陆
一个好用的MQTT客户端软件
易得者易失
04-30 560
MQTT客户端软件，用于MQTT调试，测试用。
[XR806开发板试用] XR806 调用cjson 实现数据序列化
weixin_47569031的博客
04-29 315
[XR806开发板试用] XR806 调用cjson 实现数据序列化
如何删除BigKey
fishniu35的博客
04-29 297
BigKey内存占用较多，即便时删除这样的key也需要耗费很长时间，导致Redis主线程阻塞，引发一系列问题。优点：底层使用ziplist，空间占用小，可以灵活访问对象的任意字段。缺点：占用空间大、没办法做统一控制。优点：可以灵活访问对象任意字段。缺点：数据耦合，不够灵活。
FME学习之旅---day26
最新发布
summer_corner的博客
05-06 286
【由于工作的需要，会频繁的使用到json文件中存储的wkt格式的坐标数据，需要将其转换成shp；或者人工确定json中某一固定属性对应的值等一些重复枯燥的人工核实任务，所以想看一下FME中能否有较好的解决方法】【由于上周，上班状态不是很好，事情多又杂，没有学习的劲头，就短暂的休息了一下下。双休爬山，给自己上了强度，今天才缓过来，下周又是五一了，估计要到五一后过渡一下，学习的劲头又能恢复了】我们付出一些成本，时间的或者其他，最终总能收获一些什么。
利用jsp做一个简单的注册页面
04-15
1. 创建一个JSP页面，可以命名为register.jsp。 2. 在register.jsp中添加HTML表单，包括输入用户名、密码、确认密码、电子邮件等信息的表单字段。 3. 在表单中添加提交按钮。 4. 在提交按钮点击后，调用一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值